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

一、需求

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

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

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

二、实现思路

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

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

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

三、代码实现

(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>

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

相关推荐
liusheng7 分钟前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪12 分钟前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛16 分钟前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能17 分钟前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost23 分钟前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu28 分钟前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
牛马大师兄31 分钟前
STM32实现低功耗管理使用配置知识梳理笔记
笔记·stm32·单片机·嵌入式硬件·物联网·低功耗
云中雾丽37 分钟前
react-checkbox的封装
前端
乐园游梦记39 分钟前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
岁月宁静41 分钟前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js