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