【element UI】table表checkbox实现 全部选择和反向选择

要实现功能：

按钮实现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>

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">
         
         <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>

实现关键点：

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

//全部选择
selectAll() {
            this.$refs.table.toggleAllSelection();
        },
   //反向选择
     reverseSelect(rows) {
       rows.forEach(row => {
         this.$refs.table.toggleRowSelection(row);
       });
     },

成功实现该功能

参考

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

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