用elementui table 组件做了一个树形结构的表格,用的懒加载,想在表格头部做个按钮,点击一键展开收起。
首先尝试了expand-row-keys 属性,发现设置了只是将左边的箭头展开,但是根本没有加载数据。
接着看到toggleRowExpansion方法,直接调用也是相同的效果。
深入看了一下组件源码,这个组件就是有这个问题,当是lazy模式下直接切换箭头,没有加载数据,也并没有打算修复。
于是把相应的代码扒拉下来改了一下。
<el-table-column align="left" prop="name" show-overflow-tooltip>
<template slot="header" slot-scope="scope">
<span>xxx</span>
<el-button type="text" size='mini' :icon="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click='expandRows'>{{expanded?'收起':'展开'}}</el-button>
</template>
<template slot-scope="scope">
</template>
</el-table-column>
expandRows(){
this.expanded = !this.expanded
const { table: { toggleRowExpansion, store }} = this.$refs;
const { states: { lazy, treeData, rowKey }, assertRowKey, loadData } = store
this.list.map(row=>{
const id = this.getRowIdentity(row, rowKey)
const data = treeData[id]
if (this.expanded) {
if (lazy && data && 'loaded' in data && !data.loaded) {
return loadData(row, id, data)
}
}
return toggleRowExpansion(row, this.expanded)
});
},
getRowIdentity (row, rowKey) {
if (!row) throw new Error('row is required when get row identity');
if (typeof rowKey === 'string') {
if (rowKey.indexOf('.') < 0) {
return row[rowKey];
}
let key = rowKey.split('.');
let current = row;
for (let i = 0; i < key.length; i++) {
current = current[key[i]];
}
return current;
} else if (typeof rowKey === 'function') {
return rowKey.call(null, row);
}
},
this.expanded 是一个展开收起的flag,用来展示按钮的文字与箭头
this.list 是当前table 的父级数据列表
当点击按钮时调expandRows