el-table组件高亮指定列_cell-class-name

写在前面

• 本例子基于Vue3+TS+element-plus
• 需要实现的效果也很简单，如下图，就是固定位置的单元格高亮
  

1 cell-class-name

1.1 实现思路

• 是为表格属性cell-class-name 绑定一个方法，为需要高亮的单元格添加一个自定义类名
• 如下图，handleCellClassName 方法接收一个对象，该对象存在四个属性，这里我们只需要行下标（rowIndex）和列下标（columnIndex）就能定位到指定单元格了
• 因为是下标，那么我们指定的就是第二行第一列的单元格高亮（也就是设置了背景颜色）
  

1.2 查看控制台

• 查看自定义的类名是否存在，可以看到 bjx 已经存在
  

1.3 添加自定义样式

方式一：

• 给自定义类名添加样式，因为使用到了element组件，修改样式需要进行属性穿透
• 这里需要注意的是使用:deep()时，style标签需要添加scoped属性否则样式无法生效
• scoped属性标识此组件中样式只作用于该组件，不会造成样式的全局污染；scoped属性会为所有类名添加一个hash,保证其唯一性
  ，因此这种修改方式也是更加合理的
  
  

方式二：

• 不使用scoped 属性，也就是作为全局样式
• 如下图，这种方式也能生效
  

2 cell-style

• 这也是el-table的一个属性，与cell-class-name不同的是，它需要返回返回一个对象
• 使用起来也是绑定一个回调函数，函数会接收一个对象
  
• 打开控制台可以看到，定义的样式作为内联样式插入了，同样也能生效
  

写在最后

• 以上例子只是简单的演示一下基础的实现方式，单元格的位置也是固定的
• 实际开发中往往需要高亮的内容区域都是动态的，但是本质上还是通过上面两种方式动态添加样式实现效果；至于高亮哪部分内容需要根据需求而定，根据接口返回的标识字段查找出该字段处于表格当中的位置（rowIndex,columnIndex）,再为其添加自定义样式即可。