el-table父子结构数据样式控制

el-table父子结构数据样式控制

实现效果：,
使用el-table组件展示具有父子结构的数据，控制父子样式一致，父级之间样式不同的效果，实现友好的用户交互功能。

注意点：
1.父子结构数据表单有时候会出现展开箭头失效问题，一般由于样式问题；
2.如果要控制父子样式相同，间隔父级样式不同需要在原始数据结构中进行处理。
代码实现：

// 接收树形结构的表格设置：:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
// 根据数据动态控制表格样式：使用动态样式控制
<el-table
  :data="dataList"
  row-key="id"
  ref="dataTreeList"
  border
  :cell-style="{padding:'1px 0'}" style="width: 100%;"
  :max-height="tableHeight" :height="tableHeight"
  :default-expand-all="isExpansion" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  :row-class-name="tableRowClassName">
  
 // --------------method:---------------------------------------------
  tableRowClassName (rows) {
   return rows.row.background
  },
  
 //处理原始数据-----给数据添加额外属性background，在动态样式中获取background作为样式显示
 //----根据父级所在行的奇偶性控制样式，偶数行父级样式为first-row，奇数行父级样式为second-row
 // ----子级样式与父级样式相同
  delTableStyle () {
  this.dataList.forEach((item, index) => {
    if (item.children.length > 0) {
      if (index % 2 === 0) {
        item.background = 'first-row'
        item.children.forEach((ch, ind) => {
          ch.background = 'first-row'
        })
      } else {
        item.background = 'second-row'
        item.children.forEach((ch, ind) => {
          ch.background = 'second-row'
        })
      }
    } else {
      if (index % 2 === 0) {
        item.background = 'first-row'
      } else {
        item.background = 'second-row'
      }
    }
  })
},

//------------------------------样式-------------------------
/deep/.el-table .first-row{
  background-color: #87CEFA;
}

/deep/.el-table .second-row{
  background-color: #F0F8FF;
}

// 去掉eltable的hover效果
/deep/.el-table tbody tr:hover > td {
  background-color: transparent !important;
}