主要代码:
<div class="box">
<div class="top">
<el-button type="info" @click="reverseElectionClick">反选</el-button>
<div>已选择:({{ selected }})</div>
<div>已选择亩数:({{ num }})</div>
<el-select v-model="type" placeholder="修改作业类型" size="small" width="45">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="table">
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column prop="serialNumber" label="序号" width="60" align="center" />
<el-table-column prop="area" label="作业面积(亩)" width="100" align="center" />
<el-table-column prop="reta" label="达标比" width="100" align="center" />
<el-table-column prop="repetitionArea" label="重复面积(亩)" width="100" align="center" />
<el-table-column prop="position" label="归属区县" width="190" align="center" />
</el-table>
</div>
</div>
// 反选
reverseElectionClick(){
this.tableData.forEach(item=>{
let flg = false;
this.multipleSelection.forEach(el=>{
if (item.id == el.id){
flg = true;
}
});
if (flg){
this.$refs.multipleTable.toggleRowSelection(item,false);
} else {
this.$refs.multipleTable.toggleRowSelection(item,true);
}
})
},