element-ui表格跨页选择数据

本文主要是介绍element-ui表格跨页选择数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

element-ui表格跨页选择

- 1.template部分
- 2.js部分
- 3.全部代码

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[i];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[i];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>