el-table树形数据序号展示和颜色分级
最终效果：
1.树形序号
- el-table中通过设置
row-key="id" :tree-props="{children: 'subList'}" :default-expand-all="true"实现树状展示数据。
<el-table
:data="list"
row-key="id"
:tree-props="{children: 'subList'}"
:default-expand-all="true"
>
<el-table-column
prop="parentIndex"
label="序号"
width="300"
align="left">
</el-table-column>
<el-table-column
prop="name"
label="评价指标"
width="300"
align="left"
show-overflow-tooltip
/>
</table>
data(){
return {
// 表格数据
list:[
{
name:undefined,
parentIndex: undefined,
subList: [
name:undefined,
parentIndex: undefined,
subList: null
]
},
{
name:undefined,
parentIndex: undefined,
subList: [
name:undefined,
parentIndex: undefined,
subList: null
]
},
]
}
}
- 序号列绑定自定义的字段
prop="parentIndex"，控制数据序号的展示；
实现方式： 通过接口获取数据时调用setParentIndex方法，并将接口返回的列表数据传入，重新处理数据，为每项数据增加parentIndex字段。
setParentIndex(list){
list.forEach((item, index) => {
item.parentIndex = index + 1 + ''
if(item.subsetList && item.subsetList.length > 0){
this._setParentIndex(item, item.parentIndex)
}
});
},
_setParentIndex(item, oldIndex){
if (item.subsetList && item.subsetList.length > 0) {
item.subsetList.forEach((subItem, i) => {
subItem.parentIndex = oldIndex + '.' + (i + 1);
this._setParentIndex(subItem, subItem.parentIndex);
});
}else {
return
}
},
2.颜色分级
el-table设置row-class-name="getRowStyle"
<el-table
:row-class-name"getRowStyle"
>
</el-table>
2.实现method
getRowStyle({ row }) {
const level = this.getLevel(row)
if(level === 1) {return 'row_1'}
else if(level === 2) {return 'row_2'}
else if(level >= 3) {return 'row_3'}
return ''
}
getLevel(row) {
const parentIndex = row.parentIndex
const strNumber = parentIndex.toString()
const matches = strNumber.match(/\./g)
return matches ? matches.length + 1 : 1
}
- 更改样式
.el-table {
::v-deep .row_1 {
background-color:'#a6e3e9';
}
::v-deep .row_2 {
background-color:'#e3fdfd';
}
::v-deep .row_3 {
background-color:'#ffffff';
}
}
