ElementUi 两个表格反选

JinXinYuan 2020-01-08 原文

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()