赞
踩
按钮实现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);
});
},
成功实现该功能
element ui 官网的 https://element.eleme.cn/#/zh-CN/component/table#table-attributes
参考了上图中这两个按钮的功能实现
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。