高亮自定义指令,表格前一列也高亮?

一、需求

最近开发一个审核功能,详情编辑以后,

在原列表查看,详情是旧数据,

在审核中心查看,修改过的数据要显示新数据并且高亮

二、实现思路

初步思考,决定通过自定义指令实现颜色的高亮和数据的替换

比在代码中、直接通过判断添加样式和写三元表达式精简

后端再给一个接口,传递修改过的数据

三、代码实现

(1)自定义指令的代码实现如下

ts 复制代码
import { createApp } from 'vue'

const DEFAULT_COLOR: Record<string, any> = {
  blue: '#409EFF',
  // red: '',
}

export default {
  install(app: ReturnType<typeof createApp>): void {
    app.directive('highlight', (el, binding) => {
      const { open, currentValue, newValue, replace } = binding.value || {}
      if (!open) return // 如果不需要高亮,直接返回

      if (
        (currentValue != null && currentValue !== newValue)
        || (currentValue == null && binding.oldValue !== newValue)
      ) {
        el.style.color = binding.arg ? DEFAULT_COLOR[binding.arg] : DEFAULT_COLOR.blue
      } else {
        el.style.color = 'inherit'
      }

      // 替换内容
      if (replace) {
        el.textContent = newValue ?? '' 
      }
    })
  },
}

页面表格代码实现如下

js 复制代码
  <el-table-column
    prop="couponDate"
    align="center"
    min-width="110px"
    label="日期">
    <template #default="scope">
      <span>{{ scope.row.couponDate }}</span>
    </template>
  </el-table-column>
  <el-table-column
    prop="couponAmount"
    align="center"
    min-width="170px"
    label="金额">
    <template #default="scope">
      <span v-highlight:blue="{ open: reviewData.updateType === 2, newValue: reviewData.couponInfo?.[scope.$index]?.couponAmount, replace: true }">{{ scope.row.couponAmount }}</span>
    </template>
  </el-table-column>

查看页面效果,金额前面没给高亮的日期列,数据也高亮了,其他列正常,真是奇怪!!

三、问题初步解决

1、认真查看代码及其逻辑,未发现什么问题,

2、是不是代码里有全局的css样式,检查以后排除,

3、在给el-table加上row-key,也无济于事,

4、在日期的span上加上样式 style="color: inherit", 依然不起作用,

还有其他尝试,依然没效果,

最后,在认真思考一下,本列通过自定义指令改了颜色,

影响了它前面一列的颜色,会不会是它找不到准确元素或者element plus内部相关css属性

尝试给span元素在包裹一层,问题还真解决了

js 复制代码
  <el-table-column
    prop="couponDate"
    align="center"
    min-width="110px"
    label="日期">
    <template #default="scope">
      <span>{{ scope.row.couponDate }}</span>
    </template>
  </el-table-column>
  <el-table-column
    prop="couponAmount"
    align="center"
    min-width="170px"
    label="金额">
    <template #default="scope">
      <span>
          <span v-highlight:blue="{ open: reviewData.updateType === 2, newValue: reviewData.couponInfo?.[scope.$index]?.couponAmount, replace: true }">{{ scope.row.couponAmount }}</span>
      </span>
    </template>
  </span>el-table-column>

深层原因暂未去寻,在此简单记录一下

相关推荐
@大迁世界16 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手16 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead16 小时前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu16 小时前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡16 小时前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞16 小时前
Vue3后退不刷新,前进刷新
前端
LuckySusu16 小时前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu16 小时前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu16 小时前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge16 小时前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端