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()
希望對大家有幫助。 結束...