对Element-ui中table row-class-name/row-style/cell-class-name/cell-style设置每列/每行/单个的样式

1.调整列的样式

1.1给列(单元格)添加 class

使用 element-ui 官方提供的 cell-class-name

cell-class-name

第一步 table 标签中引入:cell-class-name=“returnName”

returnName 是一个函数

<el-table v-loading="loading" 
:cell-class-name="returnName" 
:data="fabList">

</el-table>

第二步 method 添加 对应的方法"returnName"

return 的值 就是返回class名字
obj 是参数 官网提供的表格数据
可以打印查看

  methods: {
   
    // return 表格单元格class
    //obj  是参数  官网提供的表格数据 
    //可以打印查看
    returnName(obj) {
   
    //columnIndex  就是第几列的意思
    //当时 第一列的时候  返回tableTextColor 当的class
    //否则 不处理不添加class
      if (obj.columnIndex == 1) {
   
        return "tableTextColor"
      }
    }
}

上面函数可能不太理解对吧:

returnName 函数介绍 意思就是…

1.returnName这个函数 会绑定给每一个单元格
2.也就是 有几个单元格 就会执行几次,会给每个单元格 输出class
3.return 的值 就是class名字 将return 的值当做class 添加到 td 上面
3.当 return为空 或没有时候 就不添加class

只要限制的条件改变 就能实现不同单元格的样式修改

第三步 style标签内 添加 对应的样式

<style lang="scss" scoped>
//某行的class样式
/deep/.tableTextColor {
   
  color: rgb(14, 120, 241);
  cursor: pointer;
  transition: 0.5s linear;
  //hover 效果  可以不要
  &:hover .cell{
   
    transition: 0.2s linear;
    transform:scale(1.2) translateX(24px)