简单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时,实现批量选中效果的更多相关文章

  1. vue中使用elementui里的table时不被选中设置

    情景:例如提现列表,转账失败后转账金额直接返回用户余额,所以当前数据不可以再次操作 直接粘贴代码: <el-table-column type="selection" wid ...

  2. 使用js批量选中功能实现更改数据库中的status状态值(批量展示)

    我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值.下面以修改数据库的status状态值来实现批量展示功能.批量选中功能引用js来实现.前端html代码: <table ...

  3. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  4. vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...

  5. 使用Vue.js实现列表选中效果

     实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...

  6. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  7. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  8. vue隐藏APP启动时显示的{{}}

    vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个

  9. foreach DataTable或Table时要略过第一行。

    昨天有续写一个练习<输入数字动态创建行(二)>http://www.cnblogs.com/insus/p/4916260.html ,最终是需要把数据存入数据库中. 在循环ASP:Tab ...

随机推荐

  1. Java并发编程-CountDownLatch

    基于AQS的前世今生,来学习并发工具类CountDownLatch.本文将从CountDownLatch的应用场景.源码原理解析来学习这个并发工具类. 1. 应用场景 CountDownLatch是并 ...

  2. hihoCoder编程练习赛72

    题目1 : 玩具设计师 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho作为Z国知名玩具品牌AKIRE的首席设计师,对玩具零件的挑剔程度已经到了叹为观止的地步.所有 ...

  3. laravel接值 get post

    laravel使用一种简单的方式来访问用户提交的信息. 你可以用统一的方式来访问用户提交的信息,而不用为用户提交信息的方式操心. 引用类:use Illuminate\Support\Facades\ ...

  4. link-hover-visited-active

    :link { color: blue; } :visited { color: purple; } :hover { color: red; } :active { color: orange; } ...

  5. 洛谷P5205 【模板】多项式开根(多项式sqrt)

    题意 题目链接 Sol 这个就很没意思了 求个ln,然后系数除以2,然后exp回去. #include<bits/stdc++.h> #define Pair pair<int, i ...

  6. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  7. iOS----------SVN问题 the operation could not be completed

    可能是服务器磁盘满了或者你本地的内存满了

  8. XML 和 DTD

    1.XML 1.1xml简介 a)xml,eXtensible Markup Language,可扩展标记语言,是一种标记语言: b)xml是一种非常灵活的语言,没有固定的标签,所有的额标签都可以自定 ...

  9. (python)数据结构------列表

    一.数字的处理函数 (一)int() 取整数部分,与正负号无关,举例如下: print(int(-3.6), int(-2.5), int(-1.4)) print(int(3.6), int(2.5 ...

  10. virtualbbox centos7 NAT模式外网 Host-only Adapter模式联网 双网卡

    1.下载oracle VM virtualbox  centos7 1.1. 下载地址:https://www.virtualbox.org/wiki/Downloads https://www.ce ...