首先我们需要在el-table上加入这些属性
row-key="id" //行唯一key
:expand-row-keys="expands" //展开行id数组,且值为string
@expand-change="expandSelect" //展开关闭监听
expands的值要与row-key值对应, 然后在expandSelect去实现相应操作、
下附完整实列
let expands = ref([]);
let exarr = ref([]); // 存放对应展开的层级[1级,2级···]
const expandSelect = (row, expandedRows) => {
if (row.children.length > 0 && expandedRows) {
// 判断当前exarr内是否有同层被展开
let rep = exarr.value.some((item) => {
return item == row.level;
});
if (rep) {
// 关闭其他子层级
exarr.value = exarr.value.filter((item) => {
return item <= row.level;
});
// 删除同级和子展开行id,将新的展开行id再赋值进去
expands.value =
row.level == 1 ? [row.id + ""] : expands.value.slice(0, exarr.value.length - 1).concat(row.id + "");
} else {
exarr.value.push(row.level);
expands.value.push(row.id + "");
}
}
};
row是当前行数据, expandedRows为展开还是关闭。