Element UI实现全选和取消功能

1、点击全选，则选择全部选项框，再点击一下全选，则不选任何选项框，先放一张实现图，如下所示。

2、Element UI下的el-table构建表格，属于html表现层部分，其代码如下所示:

<template><div><el-table  ref="multipleTable" :data="tableData" border style="width: 80%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="120px" align="center"></el-table-column><el-table-column prop="gsbm" label="公司编码" align="center" ></el-table-column><el-table-column prop="gsm" label="公司名" align="center"></el-table-column></el-table><div slot="footer" class="dialog-footer"><el-buttontype="primary"@click="SelectAll(tableData)"class="el-button el-button--primary el-button--mini">全 选</el-button><el-button@click="AddShowDialog = false"class="el-button el-button--primary el-button--mini">取 消</el-button><el-buttontype="primary"@click="AddGs()"class="el-button el-button--primary el-button--mini">确 定</el-button></div><div>
</template>

3、js部分，进行数据及方法的处理，代码如下所示：

<script>export default {data() {return {tableData: [{gsbm:"QP",gsm:"阿里巴巴"},{gsbm:"QK",gsm:"腾讯"},{gsbm:"QG",gsm:"华为"},{gsbm:"QF",gsm:"小米"},{gsbm:"QP",gsm:"中国银行"},],//批量数据multipleSelection: [],//批量多选}},methods:{//多选后数据变化handleSelectionChange(val){console.log("val  ::::"+JSON.stringify(val));this.multipleSelection = val;},//全选按钮SelectAll(rows){console.log("rows : "+JSON.stringify(rows));if(rows){rows.forEach(row =>{this.$refs.multipleTable.toggleRowSelection(row);});}else{this.$refs.multipleTable.clearSelection();//清除全选}},}}</script>

以上代码可以简单实现全选和反选的功能，都放在全选这一个按钮上了，如果有需要，大家可以将代码拆分一下，分别用全选和反选来做，也可以。

路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有所帮助，但使用el-table方式来构建表格存在一些问题，当数据比较多时，没有右侧的滚动条和底部的滚动条，鉴于此，可以参考另一篇文章，ag-grid来实现全选和反选。

Element UI实现全选和取消功能相关推荐

element ui 表格全选与否
虽然element ui 的接口提供了全选与反选,可是当我有多条数据时, 选中了某一条,再点全选/反选按钮时,会出现异常情况.下面是解决办法, template部分: <template> ...
Element UI checkbox 全选操作分析
引入checkbox 组件 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" ...
实现全选和取消全选功能
<body> <div class="wrap"> <table> <thead> <tr> <th> &l ...
【 jQuery 】利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能，为表格添加光棒效果
利用 jQuery 选择器实现表格的全选,取消选择,单击更改选中状态,反选等功能.如图所示.点击全选按钮,选中所有行,点击取消按钮,所有行为未选中状态,单击反选按钮,则选中的行变成未选中的: 未选 ...
java里部分文件全选怎么整,全选和取消怎么办
HTML code 全选和取消怎么处理 function bindEvent(fun) { var args = []; for(var i = 1; i < arguments.length ...
AVL_全选_取消全选_打印_ZMM1035
*&---------------------------------------------------------------------* *& Report ZMM1035 * ...
Android开发中ListView多屏的全选、反选功能
[size=medium] 鄙人最近刚开始学习Android,在练习的时候写到一个ListView的全选反选功能.本来以为这个功能很简单,随随便便就能搞定,结果真的下手去做的时候被虐的死去活来,不知道 ...
axure实现复选框全选_Axure RP实例教程：全选与取消全选效果
原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...
js表单全选和取消全选
这是一个全选和取消全选的功能,最上边的是全选框,下边的是单选框. 1. 全选框选中,下边的所有单选框也都选中,全选框取消选中,下边的单选全不选中.如果全选选中情况下,下边的取消选中一个,哪上边的全选框 ...
jquery的attr和removeAttr实现checkbox全选和取消全选问题
jquery的attr和removeAttr实现checkbox全选和取消全选问题问题说明: 一个全选和取消全选的功能,界面效果图如下点击全选checkbox则所有checkbox被选中或者取消选 ...

Element UI实现全选和取消功能

Element UI实现全选和取消功能相关推荐

最新文章

热门文章