场景描述:
在表格第一列显示勾选框,支持行多选。然后在这一列的列头增加排序按钮,对已勾选和未勾选的行进行排序。
解决方案:
常用的解决方案有两种:
1,利用table组件本身的rowSelections属性,对其进行封装改造,实现需求。
2,给表格绑定的数据增加一列,列头样式为勾选框+排序按钮。数据列显示勾选框组件。
这里为了充分利用table组件本身的接口方法,采用第一种方案。
首先在computed钩子函数内定义rowSelection:
rowSelection () {
const _this = this
return {
selectedRowKeys: _this.selectedRowKeys,
onChange: _this.onSelectChange,
hideDefaultSelections: true,
selections: [
{
key: 'sortCheckRow',
text: 'sort',
onSelect: () => {
this.sortTableRow()
}
}
]
// getCheckboxProps: record => ({
// props: {
// defaultChecked: _this.selectedRowKeys.includes(record.id) // 当前需要勾选的行
// }
// })
}
}
hideDefaultSelections: 设置为true, 则不展示rowSelection下拉选择菜单的两个选择项按钮。
this.selectedRowKeys这个变量值由rowSelection中的onChange事件决定
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
然后我们自定义一个排序的选择项按钮在里面,并且定义一个触发方法:sortTableRow。
//列表根据checkbox是否勾选分类排序
sortTableRow () {
const checkedRows = this.$refs.table.localDataSource.filter(t => this.selectedRowKeys.includes(t.id))
const uncheckedRows = this.$refs.table.localDataSource.filter(t => !this.selectedRowKeys.includes(t.id))
let newTableData = []
switch (this.sortFlag) {
case 0: // 初始状态时点击排序,勾选在前
newTableData = checkedRows.concat(uncheckedRows)
this.sortFlag = 1
break
case 1: // 勾选在前时点击排序,勾选在后
newTableData = uncheckedRows.concat(checkedRows)
this.sortFlag = -1
break
case -1: // 勾选在后下时点击排序,恢复初始状态
newTableData = this.tableCache
this.sortFlag = 0
break
default:
break
}
this.$refs.table.localDataSource = newTableData
},
这个方法主要用来模拟table组件的列的sort功能。
分别获取当前勾选和未勾选的行,然后根据当前排序标识,重新组装排好序的数组赋给表格数据源。
这样就实现了基于勾选行的排序功能。
最后,关于表格行的勾选状态的初始加载,直接将好表格数据行的id数组赋给selectedRowKeys这个变量就行,它的变化会触发table属性rowSelection中selectedRowKeys的变化,从而实现初始默认勾选。
欢迎留言交流。