关于el-table添加单元格及表头单元格 className更改样式

194 阅读1分钟

1.表头单元格 element中el-table中自带属性header-cell-class-name 方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性

image.png

可以通过在table添加header-cell-class-name

el-table :data="tableData" :header-cell-class-name="cellheader" 
              @selection-change="handleSelectionChange" @filter-change="filterChange"

然后通过方法判断锁定所要进行操作的行列号为th添加固定className

cellheader({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == '6') {
        return 'th-edgghit-cls'
      }
    },

就可以实现className的精准添加

image.png

  1. 单元格 使用自带的属性cell-class-nameheader-cell-class-name 一样接受一个对象 方法使用也和表头单元格相似 还可以对单元格添加的prop属性 在方法参数对象column中propperty中看到prop属性 做判断添加calssname
cellClsNm({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'hh') {
        return 'td-edit-cls'
      }

    },