自定义Element-UI Table展开行expand图标并动态根据条件高亮

实现效果图 expand log 有数据就高亮

1. 实现更换Table展开行expand图标 ，如上动态是显示立体上(下)三角

  /deep/.el-table__expand-icon{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  /deep/ .el-table__expand-icon>.el-icon{
    display: block;
    font-size: 20px;
    margin-bottom: 15px;
    color: #606266;
    transition: color .15s linear;
    margin-left: -10px; // 自定义间距
    margin-top: -10px; // 自定义间距
  }
  
  /deep/.el-table__expand-icon .el-icon-arrow-right:before{
    content: "";
    color: #ccc;

  }
  
  /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before{
    content: "";
  }

2. 实现更换Table展开行expand图标&--Highlight（record__wrapper--Highligh）高亮样式

  /deep/ &--Highlight .el-table__expand-icon .el-icon-arrow-right:before{
    color: #409EFF;
  }
  

3. 实现初始化显示高亮，加入v-bind:cell-class-name="setCellClassName"，使用setCellClassName单元格的 className 的回调方法

<el-table
  :cell-class-name="setCellClassName"
>

setCellClassName({ row, columnIndex }) {
  if (columnIndex === 0 && row.isHighlight) { // 找到对应列&显示条件,这里是判断的isHighlight
    return 'record__wrapper--Highlight'
  }
}

4. 默认展开有数据的第一个节点, 使用expand-row-keys和row-key

data(){
    return {
        expands: []
    }
}

<el-table
   :row-key="serRowKeys"
   :expand-row-keys="expands"
>

serRowKeys(row) {
  return row.depandId // 唯一ID
}

setExpands() {
  this.expands = []
  this.tableData.find(val => {
    if (val.richTextContentVO) { // 判断是否有richTextContentVO对象存在
      this.expands.push(val.depandId) // 赋值存在数据第一个节点
      return true
    }
  })
}

好了... 到这里就结束了，⭐⭐⭐⭐