项目中使用了el-table 树形结构来展示数据，并且可以直接编辑、新增数据。
项目截图
将“id”作为row-key，expand-row-keys为数组“expandRowKeys”,代码如下：
<el-table
:data="configurationList"
:expand-row-keys="expandRowKeys"
:row-key="id}"
:tree-props="{ children: 'children' }"
:header-cell-style="tableHeaderCellStyle"
ref="treeTable"
@expand-change="expandChange"
></el-table>
JS:
addTemplate(parentId, row) {
let index = this.configurationList.length + 1;
this.configurationList.push({
isAdd: true,
no: index,
parentId: parentId,
id: new Date().getTime()
});
this.expandRowKeys.push(row.id);
},
手动增加了子目录之后发现父级的行并没有被展开，开始疑惑并且寻找原因，仔细看了element-ui的文档之后发现了问题
官方文档
“类型为String时支持多层访问” ，看到这句话明白了些什么开始修改，将row-key的“id”转为String类型，新增子目录时往expandRowKeys里push也记得转换成String类型
<el-table
:data="configurationList"
:expand-row-keys="expandRowKeys"
:row-key="row => { return row.id.toString() }"
:tree-props="{ children: 'children' }"
:header-cell-style="tableHeaderCellStyle"
ref="treeTable"
@expand-change="expandChange"
></el-table>
JS:
addTemplate(parentId, row) {
let index = this.configurationList.length + 1;
this.configurationList.push({
isAdd: true,
no: index,
parentId: parentId,
id: new Date().getTime()
});
this.expandRowKeys.push(row.id.toString());
},
问题解决，试了一下可以正常打开了，记得在手动展开关闭行的时候操作expandRowKeys数组中的数据,row-key一定要保持唯一
expandChange(row, expanded) {
if (expanded) {
if (this.expandRowKeys.indexOf(row.id.toString()) < 0) {
this.expandRowKeys.push(row.id.toString());
}
} else {
this.expandRowKeys.splice(this.expandRowKeys.indexOf(row.id.toString()), 1);
}
},
