el-table 分页多选功能共通方法抽取+实现
注意
该分页多选功能只支持当页全选
代码
1.抽取共通的分页逻辑
TableSpreadSelection.js
/**
* data配置项
* tableName: 表格ref名称
* keyName: 表格row-key字段名称
* el-tabl属性配置
* :row-key="getRowKeys"
* @select="handleCheckBox"
* @select-all="handleSelectAll"
*/
export default {
data() {
return {
// 选择的内容,存储data中keyName配置的key,一般为数据的id主键
selectContent: []
}
},
methods: {
// 换页回显数据选择
pageFeedEcho(list) {
this.$nextTick(() => {
list.forEach((item, index) => {
if (this.selectContent.findIndex(v => v === item[this.keyName]) >= 0) {
this.$refs[this.tableName].toggleRowSelection(
this.$refs[this.tableName].data[index],
true
)
}
})
})
},
// 该方法是单选时的方法
handleCheckBox(rows, row) {
if (this.selectContent.find((item) => item === row[this.keyName])) {
// 下面这个filter方法就是删除的方法
this.selectContent = this.selectContent.filter(
(item) => item !== row[this.keyName]
)
} else {
this.selectContent.push(row[this.keyName])
}
},
// 该方法是当页全选
handleSelectAll(rows) {
if (rows.length) {
rows.forEach((row) => {
if (!this.selectContent.find((item) => item === row[this.keyName])) {
this.selectContent.push(row[this.keyName])
}
})
} else {
this.typeList.forEach((row) => {
this.selectContent = this.selectContent.filter(
(item) => item !== row[this.keyName]
)
})
}
},
// 下面的方法是设置table的行标识key的方法
getRowKeys(row) {
return row[this.keyName]
},
// 初始化,可控制页面第一次进入时,默认选中哪些
initSelectContent (selectContent) {
if (selectContent == undefined) {
this.selectContent = []
} else {
this.selectContent = selectContent
}
}
}
}
2.el-table标签属性配置
<el-table
:ref="tableName"
:data="typeList"
:row-key="getRowKeys"
@select="handleCheckBox"
@select-all="handleSelectAll"
>
3.data数据配置以及methods方法配置
<script>
export default {
// 利用vue的mixins,混入我们刚刚抽取的分页逻辑代码
mixins: [TableSpreadSelection],
data() {
return {
// 表格数据
tableList: [],
// 表格ref名称
tableName: 'myTable',
// 表格row-key字段名称,一般为我们数据的主键(不可重复)
keyName: 'id'
}
},
methods: {
// 获取选中的数据的主键
getSelection () {
return this.selectContent
},
/** 查询列表,选择器方法名必为getList */
getList () {
// 后端获取列表数据,此处根据自己业务情况来
listType().then(response => {
this.tableList = response.rows
this.total = response.total
// 换页回显,必带方法,参数为自己的列表数据
this.pageFeedEcho(this.tableList)
}
)
}
}
}
</script>