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

Java光头强 • 2023年2月19日下午7:40 • 技术随笔 • 阅读 347

element ui的全部选择和反向选择

要实现功能：

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

实现关键点：

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

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