ElementUI-table切页保存已勾选和被取消勾选（附默认选中）

文章目录

期待实现效果
实现方法
- 后端返回数据格式，其中``checkkeys``表示被选中列表项的``id集``,
- 代码

期待实现效果

后端返回数据中带被选中列表项的id集，在此id集的默认选中；
除了被选中项id，还要保存被取消选中项id，切页后依然保留

实现方法

后端返回数据格式，其中`checkkeys`表示被选中列表项的`id集`,

代码

表格

<el-table  size="mini" :v-loading="loading.table" :data="listResult" @select="selectL" @select-all="selectAll" ref="multipleTable"  align="center" max-height="200" >

数据data

data(){return{listResult: [],listSelect: [],listSelectId: [],listUnSelectId: [],loading1: {table: true},pageInfoResult: {pageNum: 1,pageSize: 10,total: 10},selectAllCheck:1,//奇非全偶已全}
}

获取数据时的操作

// 查询选择列表
fetchSelectAssets() {this.loading1.table = truethis.search = Object.assign({}, this.pageInfoResult)listAssetinfo(this.search).then(res => {this.listResult = res.data.list// 将后台返回的被选中id集添加到被选数组res.data.checkKeys.forEach(item => {if(!this.listSelectId.includes(item)){this.listSelectId.push(item)}})//将被取消的项从被选数组中剔除this.listUnSelectId.forEach(item => {for (let i in this.listSelectId) {if (item == this.listSelectId[i]) {this.listSelectId.splice(i, 1)}}})// 设置listSelectId中存在的数据项默认选中this.$nextTick( ()=> {this.tableData.forEach(item => {if(this.listSelectId.indexOf(item.id)!=-1){this.selectAllCheck = 2this.$refs.multipleTable.toggleRowSelection(item);}else{this.selectAllCheck = 1}})})this.pageInfoResult.total = res.totalthis.loading1.table = false})
},

选中操作

// 选中添加/不选中删除---点击全选
selectAll (selection) {if(this.selectAllCheck%2){selection.forEach((item, index) => {//选中添加到被选数组if(this.listSelectId.indexOf(item.id) === -1){this.listSelectId.push(item.id)}//选中被取消数组剔除const i = this.listUnSelectId.indexOf(item.id)if(i !== -1){this.listUnSelectId.splice(i,1)}})}else {// 取消选中this.tableData.forEach((item, index) => {const i = this.listSelectId.indexOf(item.id)if(i !== -1){this.listSelectId.splice(i,1)}if(this.listUnSelectId.indexOf(item.id) === -1){this.listUnSelectId.push(item.id)}})}this.selectAllCheck++
},
// 选中添加/不选中删除---点击行
selectL (selection, row) {if (event.target.checked) {this.listSelectId.push(row.id)for (let i in this.listUnSelectId) {if (row.id == this.listUnSelectId[i]) {this.listUnSelectId.splice(i, 1)}}if(selection.length == this.tableData.length){  //判断是否当前页面的数据项是否已全部被选中this.selectAllCheck = 2}} else {this.selectAllCheck = 1//当前页面的数据项已经不是全部被选中for (let i in this.listSelectId) {if (row.id == this.listSelectId[i]) {this.listSelectId.splice(i, 1)}}this.listUnSelectId.push(row.id)}
},

ElementUI-table切页保存已勾选和被取消勾选（附默认选中）相关推荐

element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
Ztree勾选节点后取消勾选其父子节点
前言: Ztree官方给的API可以设置勾选一个节点的同时勾选子节点或者父节点,也可以设置不影响父子节点,即将chkboxType设置为{"Y":"",&quo ...
element表格取消全选_ElementUi 表格取消全选框，用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图一. 添加添加复选框列二.给方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...
elementUI table 获取已勾选的行的数据
文章目录方法一:主要用到el-table的selection-change事件函数方法二:主要用到el-table的select和select-all事件函数前言:对列表项进行批量操作时,实现类 ...
react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
react 全选_react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下代码: import React, {Component} from 'react' export default class Demo e ...
纯js实现复选框的全选、反选与获取选中复选框的值
实现效果如下: 全选状态: 取消全选: 获取选中的复选框的值: 下面开始上代码! html <div><h2>爱好</h2><hr><form a ...
element-ui table多选CheckBox参数解析
element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用 1.简易用法,没有附加的功能要在表格里使用CheckBox很简单,只需设 ...
elementui table表格跨分页多选
elementui table表格跨分页多选项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...

ElementUI-table切页保存已勾选和被取消勾选（附默认选中）

文章目录

期待实现效果

实现方法

后端返回数据格式，其中`checkkeys`表示被选中列表项的`id集`,

代码

ElementUI-table切页保存已勾选和被取消勾选（附默认选中）相关推荐

最新文章

热门文章

ElementUI-table切页保存已勾选和被取消勾选（附默认选中）

文章目录

期待实现效果

实现方法

后端返回数据格式，其中checkkeys表示被选中列表项的id集,

代码

ElementUI-table切页保存已勾选和被取消勾选（附默认选中）相关推荐

最新文章

热门文章

后端返回数据格式，其中`checkkeys`表示被选中列表项的`id集`,