element-ui的el-table组件多选回显

选择删除，表格勾选回显同步

1.维持两个数组，弹框内部的勾选tempSelect 和 外层表格的数据realTempSelect。

2.弹框确定赋值realTempSelect = tempSelect

3.点击弹框清空再勾选

this.$nextTick(()=>{
              this.$refs['customerTable'].clearSelection();
              this.realTempSelect.forEach(item=>{
                this.$refs['customerTable'].toggleRowSelection(item,true)
              })
            })

完整代码：

 <el-button type="primary" size="mini"  @click="showDailog(true)">添加关联公司</el-button>

    <el-table ref="" :data="realTempSelect" >
      <el-table-column prop="is_third" label="Type">
        <template slot-scope="scope">
          {{scope.row.is_third == '1' ? "有 Third ID" : "无 Third ID"}}
        </template>
      </el-table-column>
      <el-table-column prop="company" label="Affiliated Company">
      </el-table-column>
      <el-table-column prop="third_id" label="Third ID">
        <template slot-scope="scope">
          {{scope.row.third_id || '--'}}
        </template>
      </el-table-column>
      <el-table-column  label="Operate">
            <template slot-scope="scope">
              <el-button type="text" @click="handleCloseCompany(scope.row)">Delete</el-button>
            </template>
          </el-table-column>
    </el-table>



    <el-dialog :visible.sync="dialogVisible" >
      <el-input
        placeholder="请输入内容"
        v-model="dialogInput"
        class="input-with-select"
        style="margin-bottom: 20px"
        clearable
      >
        <el-select v-model="dialogSelect" slot="prepend" placeholder="请选择" >
  <!--        <el-option label="请选择" value=""></el-option>-->
          <el-option label="Third ID" value="third_id"></el-option>
          <el-option label="Affiliated Company" value="company"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search()"
        ></el-button>
      </el-input>

      <el-table
        ref="customerTable"
        :data="companyList"
        highlight-current-row
        @selection-change="handleCurrentPCChange"
        row-key="usercompany_id"
        v-loading="customerTableLoading"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55">
        </el-table-column>
        <el-table-column prop="is_third" label="Type">
          <template slot-scope="scope">
            {{scope.row.is_third == '1' ? "有 Third ID" : "无 Third ID"}}
          </template>
        </el-table-column>
        <el-table-column prop="company" label="Affiliated Company">
        </el-table-column>
        <el-table-column prop="third_id" label="Third ID">
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px"
        background
        layout="total, sizes, prev, pager, next"
        :current-page.sync="page.page_no"
        :page-sizes="[10, 20, 30, 50]"
        :total="page.total_count"
        :page-size="page.page_size"
        @current-change="handleChangePage"
        @size-change="handleSizeChange"
      >
      </el-pagination>
      <div style="margin-top: 20px;display: flex;justify-content: center;">
        <el-button type="primary" @click="choose()">确定</el-button>
        <el-button @click="cancle()">取消选择</el-button>
      </div>
    </el-dialog>

		showDailog(bool) {
          this.dialogVisible = bool
          if(bool){
            this.$nextTick(()=>{
              this.$refs['customerTable'].clearSelection();
              this.realTempSelect.forEach(item=>{
                this.$refs['customerTable'].toggleRowSelection(item,true)
              })
            })

            this.getCustomeList()
          }
          },
          getCustomeList() {
            this.customerTableLoading = true
            axios({
              url: '?app=sysuser&ctl=admin_customer&act=getUserCompanyList',
              method: 'get',
              params: {
                page: this.page.page_no, 
                limit: this.page.page_size, 
                third_id:
                  this.dialogSelect === 'third_id' ? this.dialogInput : '',
                company: this.dialogSelect === 'company' ? this.dialogInput : '',
              },
            }).then((res) => {
              this.customerTableLoading = false
              this.companyList = res.data.list
              this.page.total_count = res.data.total
        },
        choose() {
          console.log(this.tempSelect)
          this.realTempSelect = [...this.tempSelect]
          this.showDailog(false)
        },
        search(){
          this.getCustomeList()
        },
        cancle() {
          this.tempSelect = []
          this.showDailog(false)
        },
        handleChangePage(page_num) {
          this.page.page_no = page_num
          this.getCustomeList()
        },
        handleSizeChange(page_size) {
          this.page.page_no = 1
          this.page.page_size = page_size
          this.getCustomeList()
        },
        handleCloseCompany(tag){
          console.log(tag)
          this.realTempSelect = this.realTempSelect.filter(item=>item.usercompany_id != tag.usercompany_id)
          this.tempSelect = [...this.realTempSelect]
        },
        handleCurrentPCChange(item) {
          console.log(item)
          this.tempSelect = item
        },