<template>
<div>
<el-table
ref="table"
:data="tableData"
size="small"
height="100%"
@selection-change="handleSelectChange"
@select="handleSelect"
>
<el-table-column width="50" type="selection" />
<el-table-column type="index" label="序号" width="50">
<template scope="scope">
<span>{{
(pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1
}}</span>
</template>
</el-table-column>
<el-table-column label="名称1" />
<el-table-column label="名称2" />
<el-table-column label="名称3" />
<el-table-column label="名称4" />
<el-table-column label="名称5" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
selectedObj: {},
selectedData: []
}
},
methods: {
getList() {
// 查数据的地方,处理分页选中状态
this.handleRowSelection(this.tableData)
},
handleSelectChange(selection) {
// 全选取消,删除当前页所有数据
if (selection.length === 0) {
this.tableData.forEach(item => {
delete this.selectedObj[item.id]
})
}
// 勾选数据 添加
selection.forEach(item => {
this.selectedObj[item.id] = item
})
// 获取所有分页勾选的数据
this.selectedData = []
for (const key in this.selectedObj) {
this.selectedData.push(this.selectedObj[key])
}
},
handleSelect(selection, row) {
// 取消单个勾选时,删除对应属性
if (!selection.some(item => item.id === row.id)) {
delete this.selectedObj[row.id]
}
},
// 处理当前列表选中状态
handleRowSelection(data) {
data.forEach(item => {
if (this.selectedObj[item.id]) {
this.$nextTick(() => {
this.$refs.table.toggleRowSelection(item)
})
}
})
}
}
}
</script>
el-table分页多选功能
最新推荐文章于 2024-07-26 11:41:15 发布