el-table的多选框设置某行样式以及是否可选

目录

• el-table 多选框某些条件下不可被选择
• el-table 多选框根据某些条件改变不同样式
• 除了针对多选的单元格的操作外，还可以针对某整行进行样式更改

现有代码：

<el-table :data="tableDataList" ...... >
  <el-table-column type="selection" ...... />

• 这里的 tableDataList 内含布尔类型的属性 dataOperate
• 要求：其值为 true 时，可被选择，可显示多选框

el-table 多选框某些条件下不可被选择

• 给多选列添加属性 selectable：

  <el-table :data="tableDataList" ...... >
    <el-table-column type="selection" :selectable="optionData" ...... />
  

• 方法：

  // 是否可以选中复选框
  function optionData(row) {
    return row.dataOperate
  }
  

• 这样的话只有 dataOperate 为 true 时才能选中，否则鼠标会显示禁止符号

el-table 多选框根据某些条件改变不同样式

• 上述方法只是不可选择，而且略带阴影，分辨不明显，所以还可以用此方式直接不显示 false 的多选框

• 给表加上属性 cell-class-name（单元格的 className 的回调方法）：

  <el-table :data="tableDataList" :cell-class-name="cellyc" ...... >
    <el-table-column type="selection" :selectable="optionData" ...... />
  

• 方法：

  // 不可被选中的不显示
  function cellyc({row}){
    return row.dataOperate === true ? '' : "hideclass"
  }
  

• 样式：

  <style scoped>
  ::v-deep .hideclass .cell .el-checkbox__input {
  	display: none
  }
  </style>
  

  • F12 可见多选框的内部代码：

    

    • 所以指定到这个 class 上，然后加以隐藏不显示的 none 即可

除了针对多选的单元格的操作外，还可以针对某整行进行样式更改

• 给表加上属性 row-class-name（行的 className 的回调方法）：

  <el-table :data="tableDataList" :row-class-name="tableRowClassName" ...... >
  

• 方法：

  // 可以被选中的行加上背景色
  function tableRowClassName ({ row, rowIndex }) {
    if (row.dataOperate === true) {
      return 'bs-row';
    }
    return ''
  }
  

• 样式：

  <style scoped>
  ::v-deep .el-table__body .bs-row {
    background: orange;
  }
  </style>
  

  • 此处 css 原理同上