【vue】使用el-table时,实现批量选中效果
简单demo
①页面:
<template>
<el-table ref="multipleTable" :data="tableData3" tooltip-effect="light" style="width: 100%" @selection-change="handleSelectionChange" stripe border fit highlight-current-row>
<el-table-column type="selection" width="55" :disable="isdisable">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection(tableData3)">全选</el-button>
<el-button @click="toggleSelection()" :disabled="multipleSelection.length == 0">取消选择</el-button>
</div>
</template>
②交互:
export default {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: [],
isdisable:false,
}
}, methods: {
//全选,取消选择
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
//val 为选中数据的集合
this.multipleSelection = val;
}
}
}
③效果:
作者:smile.轉角
QQ:493177502
【vue】使用el-table时,实现批量选中效果的更多相关文章
- vue中使用elementui里的table时不被选中设置
情景:例如提现列表,转账失败后转账金额直接返回用户余额,所以当前数据不可以再次操作 直接粘贴代码: <el-table-column type="selection" wid ...
- 使用js批量选中功能实现更改数据库中的status状态值(批量展示)
我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现.前端html代码: <table ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...
- 使用Vue.js实现列表选中效果
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- vue隐藏APP启动时显示的{{}}
vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个
- foreach DataTable或Table时要略过第一行。
昨天有续写一个练习<输入数字动态创建行(二)>http://www.cnblogs.com/insus/p/4916260.html ,最终是需要把数据存入数据库中. 在循环ASP:Tab ...
随机推荐
- 一个优秀的SEOer必须掌握的三大标配技术
首先,认识网页代码是基础 这里所讲的网页代码是指HTML代码,并不是指复杂的PHP模板技术.一般的培训机构总是提倡学SEO不用学网页代码,只要会购买域名空间搭建网站就行,因为现在的网站模板太丰富了,对 ...
- JavaScript面向对象编程指南(三) 函数
第3章 函数 3.1 什么是函数 函数:本质是一种代码的分组形式.函数的声明如下: <script type="text/javascript"> /*函数的声明组成: ...
- Echarts纵坐标显示为整数小数
chart.DoubleDeckBarChart = function (getIDParam, Legend, xAxisData, seriesName1, seriesName2, series ...
- 测试系统工程师TSE的职责与培养
测试系统工程师TSE的职责与培养 研发资深顾问 杨学明 如今,国内所有的研发型的公司都有测试部门,无论测试团队大小,都有测试组长,测试经理,测试工程师等头衔,但随着产品和业务的质量要求越来越高,产品的 ...
- tkinter进阶版——ttk
很长的一段时间里,我都是用tkinter进行GUI设计的,还写过一篇<tkinter模块常用参数>. 但后来慢慢地觉得,这个tkinter真的是有点丑啊. 于是,找到了现在的ttk. tt ...
- Linux 网卡聚合
Linux 网卡聚合的类型: 1.broadcast:传输来自所有端口的每个包 2.roundrobin:以轮播方式传输来自每个端口的包 3.activebackup:故障转移运行程序,监视更改并选择 ...
- Linux没有最小只有更小----迷你Linux版本大集合(转)
[自从去年到现在已经收集了上百种版本的Linux和Unix,至于Unix就不想说了,没有Linux的功底是很难驾驭Unix的,我在这里只把小于360M的Linux以及一些非Linux但是很像Linux ...
- Spring入门详细教程(四)
前言 本篇紧接着spring入门详细教程(三),建议阅读本篇前,先阅读第一篇,第二篇以及第三篇.链接如下: Spring入门详细教程(一) https://www.cnblogs.com/jichi/ ...
- SQL 事务隔离级别
转载来源:https://www.cnblogs.com/chenmh/p/3998614.html 标签: SQL SEERVER/MSSQL SERVER/SQL/事务隔离级别选项/设置数据库事务 ...
- c/c++ 标准库 插入迭代器 详解
标准库 插入迭代器 详解 插入迭代器作用:copy等函数不能改变容器的大小,所以有时copy先容器是个空的容器,如果不使用插入迭代器,是无法使用copy等函数的. 例如下面的代码就是错误的: list ...