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

一、需求

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

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

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

二、实现思路

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

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

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

三、代码实现

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

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

相关推荐
web守墓人37 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋40 分钟前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L42 分钟前
CSS知识复习5
前端·css
许白掰43 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
宝山哥哥8 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试