vue+element+table多选手动取消选中

vue+element+table多选手动取消选中

目录

• 1、HTML部分
• 2、JavaScript部分

1、HTML部分

<el-tableref="refSelect":data="dataList"@select="selectRow"@select-all="selectAll"
><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column label="姓名" align="center" prop="names" /><el-table-column label="年龄" align="center" prop="age" /><el-table-column label="类型" align="center" prop="type" /><el-table-column label="状态" align="center" prop="status"><template slot-scope="scope"><span>{{ w.status == 0 ? "在线" : "离线" }}</span></template></el-table-column>
</el-table>

2、JavaScript部分

export default {data() {return {dataList: [{id: 1,names: '半晨',age: 24,type: 1,status: 0},{id: 2,names: '舒冬',age: 37,type: 1,status: 1},{id: 3,names: '舒晨',age: 36,type: 2,status: 1}],selectValue: []}},methods: {// 单行选择selectRow(row) {this.handleSelect(row);},// 全选/反全选selectAll(row) {this.handleSelect(row);},// 处理选择handleSelect(row) {duce((beforeVal, afterVal) => {if (pe != pe) {row = [];this.selectValue = [];this.$fSelect.clearSelection();return this.$message.warning("请选择相同类型的数据");}this.selectValue = row;return afterVal;});}}
}