element el-table 树形数据、懒加载添加排序功能
表格自带的排序功能目前只针对第一级树结构,那么当我们想对整体树形数据来排序的时候就要经过特殊处理了
第一种:不是懒加载的树形数据
<el-table
:data="dataListOne"
row-key="id"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@sort-change="handleTableSort"
>
<el-table-column prop="id" label="序号" />
<el-table-column prop="name" sortable label="名称" />
</el-table>
通过接口获取到的数据为
dataListOne: [
{ id: 1, name: 21, address: 3 },
{ id: 2, name: 2, address: 3,
children: [{ id: 3, name: 32, address: 3 }, { id: 4, name: 14, address: 3 }]
},
{ id: 5, name: 1, address: 3,
children: [{ id: 6, name: 22, address: 3 }, { id: 7, name: 12, address: 3 }]
}
],
一定要有唯一标识,children的id不能与外层id相同。
方法:
// 列表排序
handleTableSort({ column, prop }) {
this.propType = prop
if (column.order === 'ascending') {
this.dataListOne.sort(this.ascSortFun)
this.dataListOne.forEach(item => { // 需要遍历每个children排序
if (item.children && item.children.length > 0) {
item.children.sort(this.ascSortFun)
}
})
} else if (column.order === 'descending') {
this.dataListOne.sort(this.desSortFun)
this.dataListOne.forEach(item => {
if (item.children && item.children.length > 0) {
item.children.sort(this.desSortFun)
}
})
}
},
// 升序排列方法
ascSortFun(a, b) {
return a[this.propType] - b[this.propType]
},
// 降序排列方法
desSortFun(a, b) {
return b[this.propType] - a[this.propType]
},
第二种:懒加载的树形数据
这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据
<el-table
ref="table"
:data="dataListTwo"
row-key="id"
default-expand-all
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@sort-change="handleTableSort"
>
<el-table-column prop="id" label="序号" />
<el-table-column prop="name" sortable label="名称" />
</el-table>
在data中加入一个map来用于存取数据
data() {
return {
maps: new Map(),
dataListTwo: [
{ id: 1, name: 42, address: 3, hasChildren: true },
{ id: 2, name: 12, address: 3, hasChildren: true },
{ id: 3, name: 2, address: 3, hasChildren: true }
]
}
},
方法:
load(tree, treeNode, resolve, order) { // order 判断升序降序
this.maps.set(tree.id, { tree, treeNode, resolve }) // 储存数据
// 通过接口获取的list数据
const list = [
{ id: tree.id + 18, name: 2, address: 3 },
{ id: tree.id + 12, name: 22, address: 3 }
]
// 排序懒加载的数据
if (order && order === 'ascending') {
list.sort(this.ascSortFun)
} else if (order && order === 'descending') {
list.sort(this.desSortFun)
}
resolve(list)
},
handleTableSort({ column, prop }) {
this.propType = prop
if (column.order === 'ascending') {
this.dataListTwo.sort(this.ascSortFun)
this.dataListTwo.forEach(item => {
// 重点
this.refreshLoadTree(this.$refs.table.store.states.lazyTreeNodeMap, this.maps, item.id, column.order)
})
} else if (column.order === 'descending') {
this.dataListTwo.sort(this.desSortFun)
this.dataListTwo.forEach(item => {
this.refreshLoadTree(this.$refs.table.store.states.lazyTreeNodeMap, this.maps, item.id, column.order)
})
}
},
// 升序排列方法
ascSortFun(a, b) {
return a[this.propType] - b[this.propType]
},
// 降序排列方法
desSortFun(a, b) {
return b[this.propType] - a[this.propType]
},
// 重点函数!!!
// 每次点击排序都调用此函数
// 参数分别是:组件懒加载数据的节点,data中的map,以及被操作的节点的id, 排序类型
refreshLoadTree(lazyTreeNodeMap, maps, id, order) {
if (maps.get(id)) {
const { tree, treeNode, resolve } = maps.get(id)
this.$set(lazyTreeNodeMap, id, []) // 先清空
if (tree) { // 重新执行父节点加载子级操作
this.load(tree, treeNode, resolve, order)
}
}
}
完成,希望对大家有帮助~