这不算是个问题,官方都提供了解决办法,我这里记录以下如何操作的
先是树形表格,行展开事件expand-change,直接作用在table上的
这里能直接获取到当前行的展开状态expend
// 行展开或关闭事件
expandChange(row, expanded) {
console.log(row, expanded, "expanded"); //这里expended是true表示行已展开
},
行展开事件只是展开行,再次点击行不会收拢,这里我们要结合row-click行点击事件来操作
rowClick(row, column, event) {
if (row.expanded) {
row.expanded = false;
} else {
row.expanded = true;
}
this.$refs.tableType.toggleRowExpansion(row, row.expanded);
},
toggleRowExpansion是官方提供的方法,专门用于树形表格的展开状态切换
这样就可以了
table是这样
<el-table
ref="tableType"
:data="tableData"
row-key="id"
@row-click="rowClick"
@expand-change="expandChange"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
顺带说一句,树形表格row-key是必须属性