ElementUi 两个表格反选
1.先看看实现的图
表格内容显示
<el-row :gutter="20">
<el-col :span="16">
<!--左边表格-->
<div class="grid-content bg-purple">
<el-table v-loading="zongShipLoading" tooltip-effect="dark" :header-cell-class-name="cellClass" height="350" ref="changeTable" @select="shipTableDataChange" :data="shipTableData">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column property="vesselNameCn" label="中文名称"></el-table-column>
<el-table-column property="vesselNameEn" label="英文名称"></el-table-column>
<el-table-column property="mmsi" label="MMSI"></el-table-column>
<el-table-column property="equipmentCode" label="设备编码"></el-table-column>
</el-table>
</div>
</el-col>
<el-col :offset="1" :span="7" >
<!--右边表格-->
<div class="grid-content bg-purple-light">
<el-table v-loading='addShipInfoLoading' height="350" :data="chanShipTableData" row-class-name="rowBg">
<el-table-column type="index" :index="indexMethod"></el-table-column>
<el-table-column property="vesselNameCn" label="中文名称"></el-table-column>
<el-table-column property="mmsi" label="MMSI"></el-table-column>
<el-table-column property="equipmentCode" label="设备编码"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>
反选js操作.【 this.$refs.changeTable.toggleRowSelection(row,true); 】.主要还是表格toggleRowSelection() 方法进行实现选择行单位的。第一个参数row是一个数组 ， 第二步是false or true , 默认false.如果是true ， 调用方法直接现在对应的行内容。（具体可以看ElementUi的表格API）
// 反选处理
<!--这个rows 参数你是想让表格反选的表格数据-->
toggleSelection(rows) {
let arr =[]
this.shipTableData.forEach((e, index) => {
rows.forEach((i, ind) => {
if (e.mmsi === i.mmsi) {
arr.push(this.shipTableData[index])
}
})
})
if (arr) {
this.$nextTick(() => {
arr.forEach(row => {
this.$refs.changeTable.toggleRowSelection(row,true);
});
})
} else {
this.$refs.changeTable.clearSelection();
}
},
随后调用 在所需要的地方调用这个方法 this.toggleRowSelection()
希望对大家有帮助。 结束...