vue中el |
您所在的位置：网站首页 › vue数组批量删除 › vue中el |
vue中el
|
一、开发背景及其选中操作丢失的原因？
vue+element ui开发一个table，这个表格要有分页、批量删除等功能，table的分页调用后端接口实现分页，在点击下一页调接口接口获取数据导致了DOM的重新渲染，所以导致在上一页做的选中操作没了！ 复现问题：1、点击CheckBox选中数据！
2、点击下一页或者点击上一页是选中数据的操作丢失了！
实现批量删除切换页面选中操作不丢失的关键是： @selection-change="selectionChange" //当选择项发生变化时会触发该事件 :row-key="getRowKeys" //行数据的 Key,能够拿到对应的选中的id并且返回出去 :reserve-selection="true" //仅对table列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）对应的方法： selections:[] //在export default里的data里声明一个变量 selectionChange: function (selections) { this.selections = selections.map(row => row.id) //将选中的数据存放在一个数组中 }, getRowKeys(row) { return row.id; //将id return出去 },对应的位置：
结果展示： 第一页选中操作：
第二页也选中：
回到第一页选中操作并未丢失：
1、下面附上完整的案例template的代码。 查询 重置 导出 上传 批量删除 {{ scope.row.date }} 2、script的逻辑代码。 // @ is an alias to /src import HelloWorld from "@/components/HelloWorld.vue"; export default { name: "Home", components: { HelloWorld, }, data() { return { formInline: { user: "", region: "", popr: "", add: "", }, tableAll: [ { id:1, date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { id:2, date: "2017", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:3, date: "2018", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:4, date: "201789", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:5, date: "2017dada", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:6, date: "201wfwfw7", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:7, date: "201wgggdh7", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:8, date: "201hfjgkuk7", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:9, date: "2rjrjrj017", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:10, date: "2kulil017", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:11, date: "20jyjyjy17", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:12, date: "20373717", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:13, date: "2075773717", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:14, date: "20737586987317", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:15, date: "201ddd7", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:16, date: "20qqq17", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:17, date: "20eee17", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:18, date: "20rrrr17", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, { id:19, date: "201ttt7", name: "王", address: "上海市普陀区金沙江路 1518 弄", }, ], pagenum: 1, sizes: [2, 5, 10, 20, 50], totals: 0, pagesize: 5, tablepage: [], tableData: [], loading: false, selections: [], }; }, created() { this.handleSizeChange(); }, methods: { onSubmit() { console.log("submit!"); }, handleSizeChange(val) { if (val) { this.pagesize = val; this.loading = true; this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1; this.totals = this.tableAll.length; for (let i = 0; i < this.pagenum; i++) { // 这是筛选出来的对应的页数和条数的数据 this.tablepage[i] = this.tableAll.slice( this.pagesize * i, this.pagesize * (i + 1) ); // console.log(this.tablepage[i]); // 将对应的值赋值给页面展示的数组 this.tableData = this.tablepage[i]; } // console.log(response.content.length); // this.tableData = response.content; this.loading = false; } else { this.loading = true; this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1; this.totals = this.tableAll.length; for (let i = 0; i < this.pagenum; i++) { // 这是筛选出来的对应的页数和条数的数据 this.tablepage[i] = this.tableAll.slice( this.pagesize * i, this.pagesize * (i + 1) ); // console.log(this.tablepage[i]); // 将对应的值赋值给页面展示的数组 this.tableData = this.tablepage[i]; } // console.log(response.content.length); // this.tableData = response.content; this.loading = false; } }, handleCurrentChange(val) { this.pagenum = val; for (let i = 0; i < this.pagenum; i++) { // 通过页数进行遍历 this.tablepage[i] = this.tableAll.slice( // 这是筛选出来的对应的页数和条数的数据 this.pagesize * i, this.pagesize * (i + 1) ); // console.log(this.tablepage[i]); // 将对应的值赋值给页面展示的数组 this.tableData = this.tablepage[i]; } }, toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleBatchDelete: function () { // let ids = this.selectionss.map(row => row.id).toString() this.$confirm('确认删除选中记录吗？', '提示', { type: 'warning' }).then(() => { let params = this.selections console.log(params); // let idArray = (ids+'').split(',') // for(var i=0; i { this.$message({message: '删除成功', type: 'success'}) this.$refs.table.clearSelection() // 删除成功后清除全选操作 this.queryDataByCondition() }) this.loading = false }).catch(() => { }) }, getRowKeys(row) { return row.id; }, selectionChange: function (selections) { this.selections = selections.map(row => row.id) }, }, }; 这样你再遇到后端分页，做批量删除的时候只需要把我们声明的selections传给后端就没有问题了！ |
【本文地址】