element-ui表格跨页选择数据

1.template部分

• 为table组件添加ref=‘table’
  
• 绑定命据源 :data=‘list’
  
• 添加select和select-all事件（事件处理函数为handleSelect）
  

1. <template>
2.         <div>
3.                 <el-table ref='table' :data="list" max-height="600"
4.                          @select="handleSelect" @select-all='handleSelect'>
5.                         <el-table-column fixed="left" type="selection" width="55" align="center" />
6.                         <el-table-column label="商品名称" align="center" prop="name" min-width="200" />
7.                         <el-table-column label="商品条码" align="center" prop="id" min-width="180" />
8.                         <el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
9.                 </el-table>
10.         </div>
11. </template>

复制代码

2.js部分

• 在data函数中界说全局选中数据的变量allIds
  
• 在data函数中界说数据源的变量list
  

1. <script>
2.         export default {
3.                 data() {
4.                         return {
5.                                 allIds: [],//当前选中数据的id数组
6.                                 list: [], //表格数据源
7.                         }
8.                 }
9.         }
10. </script>

复制代码

• 哀求列表数据，并根据allIds判断当前列表中是否有选中的数据，如果有则默认选中
  

1. <script>
2.         export default {
3.                 data() {
4.                         return {
5.                                 allIds: [],//当前选中的数据
6.                                 list: [], //表格数据源
7.                         }
8.                 },
9.                 created() {
10.                         this.getList()
11.                 },
12.                 methods: {
13.                         getList() {
14.                                 axios.get('xxxxx').then(res => { //模拟数据请求
15.                                         this.list = response.data.rows; //数据源
16.                                        
17.                                         //循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中
18.                                         this.$nextTick(() => {
19.                                                 this.list.map((item) => {
20.                                                         if(this.allIds.includes(item.id)) {
21.                                                                 this.$refs.table.toggleRowSelection(item,true)
22.                                                         }
23.                                                 })
24.                                         })
25.                                 })
26.                         }
27.                 }
28.         }
29. </script>

复制代码

• handleSelect事件函数的实现
  监听单选、全选事件
  判断allIds数据内里是否包含当前分页的数据，如果包含，则将当前页面数据的id从allIds 里删除
  然后将当前页选中的数据重新push到allIds数组里
  

1. <script>
2.         export default {
3.                 methods: {
4.                         // 跨页选择
5.                         handleSelect(selection) {
6.                                 let allIds = [...this.allIds];
7.                                 let delIds = this.list.map(item => item.id);
8.                                 for(let i = 0; i < this.allIds.length; i++) {
9.                                         let id = allIds[i];
10.                                         if(delIds.includes(id)) {
11.                                                 allIds.splice(i,1);
12.                                                 i--;
13.                                         }
14.                                 }
15.                                
16.                                 selection.map(item => {
17.                                         if(!allIds.includes(item.id)) {
18.                                                 allIds.push(item.id)
19.                                         }
20.                                 })
21.                                 this.allIds = [...allIds]
22.                         }
23.                 }
24.         }
25. </script>

复制代码

3.全部代码

1. <template>
2.         <div>
3.                 <el-table ref='table' :data="list" max-height="600"
4.                          @select="handleSelect" @select-all='handleSelect'>
5.                         <el-table-column fixed="left" type="selection" width="55" align="center" />
6.                         <el-table-column label="商品名称" align="center" prop="name" min-width="200" />
7.                         <el-table-column label="商品条码" align="center" prop="id" min-width="180" />
8.                         <el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
9.                 </el-table>
10.         </div>
11. </template>
12. <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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。