el-table的树形数据处理默认为动态获取的第一个数据,所以下拉三角和层级结构的样式在后端返回的排序上,但是需求要数据项名称进行层级样式
效果:
利用cell-style,改变单元格样式
<el-table
:data="tableData"
style="width: 100%"
ref="crud"
border
@selection-change="handleCurrentChange"
@row-click="handleRowClick"
:max-height="mainHeight - 300"
row-key="projectId"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:row-style="changeRowBgColor"
:cell-style="changecell"
default-expand-all
>
changecell({ row, column, rowIndex, columnIndex }) {
let styleJson = {};
if (columnIndex == 2) {
return (styleJson = {
paddingLeft: row.levelStyle + "px",
});
}
},
//递归循环表格数据,给相同层级添加一样的padding-left数值
getclass(list, childName, level = 5) { //第一层偏移5
list.forEach((item) => {
if (item.children)
this.getclass(item[childName], childName, level + 16); //每循环一层数据16px
item.levelStyle = level;
});
// console.log(list,333);
return list;
},