ElementUI表格数据批量选中操作

最近做项目时碰到个需求，要对表格中的数据批量处理，花了点时间最终解决了这个问题

elementui表格中封装了多选框，在el-column中选择type为selection即可
获取选中行的数据需要在table中定义ref使this.$refs.table.selection方法便可获取到选中行的数据
如果要获取不同页的数据进行操作，利用reserve-selection，这在官方文档中有说明

需要注意的是使用reserve-selection属性必须配合row-key（不然会报错）

<el-table-column type="selection" width="55" :reserve-selection="true">

下面是完整代码：

<template><div class="container"><el-button type="warning" @click="handle">批量操作</el-button><el-table:data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"style="width: 100%"ref="table"row-key="id"><el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column><el-table-column prop="id" label="序号"> </el-table-column><el-table-column prop="name" label="姓名"> </el-table-column><el-table-column prop="age" label="年龄"> </el-table-column><el-table-column prop="tel" label="电话"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><el-paginationbackgroundlayout="prev, pager, next,  jumper":page-size="pagesize":total="list.length"@current-change="handleCurrentChange"@size-change="handleSizeChange"></el-pagination></div>
</template><script>
export default {components: {},data() {return {list: [],pagesize: 5,currpage: 1};},methods: {getTableDate() {this.$http.post("http://127.0.0.1:8888/user/tableList").then(res => {console.log(res.data);this.list = res.data;});},//获取到选中行的数据handle() {console.log(this.$refs.table.selection);},del(row) {},handleCurrentChange(cpage) {this.currpage = cpage;},handleSizeChange(psize) {this.pagesize = psize;}},mounted() {this.getTableDate();}
};
</script>
<style lang="scss" scoped></style>

一共选中了5条数据

这是打印结果

ElementUI表格数据批量选中操作相关推荐

自制预防校园暴力的智能监控系统：远程加载表格数据，SQLAlchemy操作数据库，云服务器（CentOS)
本文是[小码哥李明杰老师]指导完成的山东大学引航计划公益人工智能科研实训项目. 自制预防校园暴力的智能监控系统重定向路径路由配置(访问根路径,直接重定向到main): export default ...
将Excel表格数据批量导入MySQL数据库表中
在实际的生产开发需求中很多时候生产数据不一定是通过数据库进行导入,而是通过Excel表格的形式传入形式,这时候需要程序员进行自动化的导入. 手动导入数据库,效率相对来说太慢,因此需要使用技巧,实现批量 ...
表格数据批量导入html,excel表格数据导入前端table-html中的表格数据怎样导入到ecxel表？...
如何将excel中的数据自动导入web页面中? 如何将Excel中一个表格的数据导入到另一个表格 DataTable.ImportSheet(FileName,SheetSource,SheetDes ...
python提取pdf表格数据_Python骚操作，提取pdf文件中的表格数据！
在实际研究中,我们经常需要获取大量数据,而这些数据很大一部分以pdf表格的形式呈现,如公司年报.发行上市公告等.面对如此多的数据表格,采用手工复制黏贴的方式显然并不可取.那么如何才能高效提取出pdf文 ...
如何将Excel表格数据批量导入到MySQL数据库中
最近遇到一个问题,就是如何将excel表格数据中几百上千行的数据导入到数据库中,使用Navicat工具的手动导入一直不成功,所以就选择使用代码的方式来进行导入,过程也比较简单,我们一起来看一下是如何实 ...
jqgrid如何渲染表格数据_Jqgrid入门-操作表格的数据(二)
上一篇中,Jqgrid已经可以从服务端获得数据,并显示在Grid表格中了.下面说一下,如何操作表格及其数据. jqGrid有很多方法函数,用来操作数据或者操作Grid表格本身.jqGrid的方法有两种 ...
php汇总多张excel数据,多个excel表格数据汇总怎么操作
多个excel表格数据汇总的方法:首先做个模板表格,并找到审视,共享工作簿:然后将表格分别填写对应组的数目:最后选择[比较和合并工作簿]即可. 多个excel表格数据汇总的方法: 1.假设情景:现在需 ...
vue elementui表格数据
先来看一下效果: 使用template的插槽实现数据提醒关键部分: <template slot-scope="scope">{{ scope.row.student ...
elementui表格数据过滤
说一下应用场景:后端返回数据中有0,1,2等指代状态的数据.我需要在表格中呈现出实际的状态文字.比如0.开启1.关闭等. <el-table-column property="cour ...

ElementUI表格数据批量选中操作

ElementUI表格数据批量选中操作

ElementUI表格数据批量选中操作相关推荐

最新文章

热门文章