element-ui表格跨页选择数据
1.template部分[*]为table组件添加ref=‘table’
[*]绑定命据源 :data=‘list’
[*]添加select和select-all事件（事件处理函数为handleSelect）
<template>
<div>
<el-table ref='table' :data="list" max-height="600"
@select="handleSelect" @select-all='handleSelect'>
<el-table-column fixed="left" type="selection" width="55" align="center" />
<el-table-column label="商品名称" align="center" prop="name" min-width="200" />
<el-table-column label="商品条码" align="center" prop="id" min-width="180" />
<el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
</el-table>
</div>
</template>
2.js部分
[*]在data函数中界说全局选中数据的变量allIds
[*]在data函数中界说数据源的变量list
<script>
export default {
data() {
return {
allIds: [],//当前选中数据的id数组
list: [], //表格数据源
}
}
}
</script>
[*]哀求列表数据，并根据allIds判断当前列表中是否有选中的数据，如果有则默认选中
<script>
export default {
data() {
return {
allIds: [],//当前选中的数据
list: [], //表格数据源
}
},
created() {
this.getList()
},
methods: {
getList() {
axios.get('xxxxx').then(res => { //模拟数据请求
this.list = response.data.rows; //数据源
//循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中
this.$nextTick(() => {
this.list.map((item) => {
if(this.allIds.includes(item.id)) {
this.$refs.table.toggleRowSelection(item,true)
}
})
})
})
}
}
}
</script>
[*]handleSelect事件函数的实现
监听单选、全选事件
判断allIds数据内里是否包含当前分页的数据，如果包含，则将当前页面数据的id从allIds 里删除
然后将当前页选中的数据重新push到allIds数组里
<script>
export default {
methods: {
// 跨页选择
handleSelect(selection) {
let allIds = [...this.allIds];
let delIds = this.list.map(item => item.id);
for(let i = 0; i < this.allIds.length; i++) {
let id = allIds;
if(delIds.includes(id)) {
allIds.splice(i,1);
i--;
}
}
selection.map(item => {
if(!allIds.includes(item.id)) {
allIds.push(item.id)
}
})
this.allIds = [...allIds]
}
}
}
</script>
3.全部代码
<template>
<div>
<el-table ref='table' :data="list" max-height="600"
@select="handleSelect" @select-all='handleSelect'>
<el-table-column fixed="left" type="selection" width="55" align="center" />
<el-table-column label="商品名称" align="center" prop="name" min-width="200" />
<el-table-column label="商品条码" align="center" prop="id" min-width="180" />
<el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
</el-table>
</div>
</template>
<script> export default { data() { return { allIds: [],//当前选中的数据 list: [], //表格数据源 } }, created() { this.getList() }, methods: { getList() { axios.get('xxxxx').then(res => { //模仿数据哀求 this.list = response.data.rows; //数据源 //循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中 this.$nextTick(() => { this.list.map((item) => { if(this.allIds.includes(item.id)) { this.$refs.table.toggleRowSelection(item,true) } }) }) }) }, // 跨页选择 handleSelect(selection) { let allIds = [...this.allIds]; let delIds = this.list.map(item => item.id); for(let i = 0; i < this.allIds.length; i++) { let id = allIds; if(delIds.includes(id)) { allIds.splice(i,1); i--; } } selection.map(item => { if(!allIds.includes(item.id)) { allIds.push(item.id) } }) this.allIds = [...allIds] } } }</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]