elementUI table 获取已勾选的行的数据

文章目录

方法一：主要用到el-table的selection-change事件函数
方法二：主要用到el-table的select和select-all事件函数

前言：对列表项进行批量操作时，实现类似下图的效果，有两种方法

方法一：主要用到el-table的selection-change事件函数

优点：简单
缺点：如果存在分页，进入别的分页，selection清空
html

<el-table  size="mini" :v-loading="loading.table" :data="listResult" :row-key="getRowkey"  @selection-change="selectL" ref="multipleTable"  align="center" max-height="200" >

// 选中添加/不选中删除
selectL (selection, row) {this.listSelect = selection;this.listSelectId = selection.map(item => item.id)
},

方法二：主要用到el-table的select和select-all事件函数

优点：切页后，被选项依然存在，即支持切页保留被选项，被选项回显
支持切页搜索
知识点：

定义selectAllCheck:0,//奇选偶非选判定当前列表数据项是否为全选状态
toggleRowSelection()：设置待选列表的数据项的默认选中，需要页面渲染完毕之后才有效，因此需要放在this.$nextTick中
判断selection/this.listResult中的数据项是否在已选列表listSelect中时，直接用数据项itemif(this.listSelect.indexOf(item) === -1)无效，通过idif(this.listSelectId.indexOf(item.id) === -1)判断有效（不知道为什么）

代码

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

data(){return{listResult: [],listSelect: [],listSelectId: [],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.rows// 设置listSelect中存在的数据项默认选中this.$nextTick( ()=> {this.listResult.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){console.log(this.selectAllCheck, this.selectAllCheck%2,'未全选')selection.forEach((item, index) => {if(this.listSelectId.indexOf(item.id) === -1){this.listSelect.push(item)this.listSelectId.push(item.id)}})}else {console.log(this.selectAllCheck, this.selectAllCheck%2,'已全选')this.listResult.forEach((item, index) => {const i = this.listSelectId.indexOf(item.id)if(i !== -1){this.listSelect.splice(i, 1)this.listSelectId.splice(i,1)}})}this.selectAllCheck++
},
// 选中添加/不选中删除---点击行
selectL (selection, row) {if (event.target.checked) {this.listSelect.push(row)this.listSelectId.push(row.id)if(selection.length == this.listResult.length){  //判断是否当前页面的数据项是否已全部被选中this.selectAllCheck = 2}} else {this.selectAllCheck = 1//当前页面的数据项已经不是全部被选中for (let i in this.listSelectId) {if (row.id === this.listSelectId[i]) {this.listSelect.splice(i, 1)this.listSelectId.splice(i, 1)}}}
},

效果

点击添加和全选添加
切页保存已选项和切页回显

elementUI table 获取已勾选的行的数据相关推荐

Vue Element-ui table隐藏表头勾选框，多选框改单选框
在table中添加class = "table-style" 在style里添加样式 .table-style /deep/ .el-table-column--selectio ...
elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark="1",是勾选状态且该勾选框变为禁用状态:反 ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
U盘文件被隐藏，隐藏的项目已勾选还是无法显示
U盘文件被隐藏,隐藏的项目已勾选还是无法显示新建一个.cmd的文件文件内容如下 for /f "delims=?" %%a in ('dir /a /b') do attrib ...
小程序报request:fail invalid url 不校验合法域名已勾选
红色框住的是正常的上面那个使用报错了请问怎么回事???------原因在链接Url后面多了空格 1.首先你要查看链接地址 2. 勾选小程序不校验合法域名.web-view(业务域名 ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
【PHPWord】如何解决PHPWord的输出checkbox复选框并设置checked已勾选
目录一.需求二.基于XML的实现方式三.兼容性强的实现方式三.总结一.需求对于生成Word文档来说,复选框的勾选状态和非勾选状态的展示是一个非常常见的问题. 需要用到复选框的文档大概有这几 ...
Element 根据勾选导出Excel表格数据
1. npm安装依赖包 npm install vue-json-excel 2.项目入口文件引进注册并且使用 import JsonExcel from 'vue-json-excel'Vue.co ...

elementUI table 获取已勾选的行的数据

文章目录

方法一：主要用到el-table的selection-change事件函数

方法二：主要用到el-table的select和select-all事件函数

elementUI table 获取已勾选的行的数据相关推荐

最新文章

热门文章