项目场景:
需求为:判断《el-table-column type="expand"》《/el-table-column》标签里的内容是否存在,存在就默认展开。问题描述:
Table组件上其实有一个 default-expand-all 属性,当设为true时会默认展开所有展开行,
可当el-table-column type=“expand”></el-table-column标签里内容不存在时,他也会默认展开一块空白行,不美观,
所以将 “内容是否存在” 作为判断条件,实现默认展开(也就是 指定行 展开)。
解决方案:
通过row-key属性和expand-row-keys属性配合使用可达到指定行展开的目的。
具体步骤(大致结构):
<template>
<el-table
:row-key="getRowKeys"
:expand-row-keys="expands"
>
<el-table-column type="expand"></el-table-column>
</el-table>
</template>
<script>
data() {
return {
//要展开的行,数值的元素是row的key值
expands: []
}
},
methods: {
//获取row的key值(这个方法不用修改,直接放上去就行)
getRowKeys(row) {
return row.id; //id为table每一栏的id
},
//当获取到数据时,让这个方法执行,并做需要展开行的判断逻辑
fn(obj) {
obj.forEach(val=>{
if(val.flag === true) {
this.expands.push(val.id); //id为table每一栏的id
}
})
},
}
</script>
END