反选,反选,反选

71 阅读1分钟

image.png

主要代码:

 <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);
		}
					
	})
},

实现效果: (updatafiles.banmag.cn//%E6%97%A0%…)