【element UI】table表checkbox实现 全部选择和反向选择_el-table 单独写个按钮控制全选反宣

要实现功能：

按钮实现element ui中table列的反向选择和 全部选择

代码实现：

按钮的代码：

<el-button size="medium" style="float: right" @click="selectAll()">选择全部</el-button>
<el-button size="medium" style="float: right" @click="reverseSelect(dataList)">反向选择</el-button>
1
2

table的代码：

<el-table ref="table" v-adaptive="{ type: 'table' }" v-loading="loading" :data="dataList" height="100%" @selection-change="selectionChangeHandle">
     <el-table-column type="selection" width="46" />

     <!-- 动态表格列 -->
     <el-table-column v-for="item in tableLineSelect" :key="JSON.stringify(item)" :width="item.width" :label="item.label" :prop="item.prop">
         <template slot-scope="scope">
             <span v-if="item.prop == 'status'"> {{ scope.row.status ? "暂停" : "正常" }}</span>
             <span v-copy="{ text: scope.row[item.prop] }" v-else> {{ scope.row[item.prop] ? scope.row[item.prop] : "—" }}</span>
         </template>
     </el-table-column>

     <el-table-column prop="updatedTime" label="更新时间" :formatter="dateFormat" sortable> </el-table-column>
     <!-- 操作 -->
     <el-table-column label="责任划分" align="center" width="235" fixed="right">
         <!--todo                           v-if="checkPermissions(['sys:user:update'])">-->
         <template slot-scope="scope">
             <div class="func-btns">
                 <el-button size="mini" type="primary" plain @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                 <el-button size="mini" type="primary" plain @click="oneLabelPrint(scope.row)">标签打印</el-button>
                 <el-button size="mini" type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
             </div>
         </template>
     </el-table-column>
 </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

实现关键点：

vue结构中methods中的函数 关键点：分别调用了toggleAllSelection()函数和toggleRowSelection(row)函数

//全部选择
selectAll() {
            this.$refs.table.toggleAllSelection();
        },
   //反向选择
     reverseSelect(rows) {
       rows.forEach(row => {
         this.$refs.table.toggleRowSelection(row);
       });
     },
1
2
3
4
5
6
7
8
9
10

成功实现该功能

参考

element ui 官网的 https://element.eleme.cn/#/zh-CN/component/table#table-attributes

参考了上图中这两个按钮的功能实现