el-table 换页勾选

1. :key="uuid" ref="mytable"

<el-table :data="list[activeName]" border stripe 
        @selection-change="handleSelectionChange"
        ref="mytable" :key="uuid">
              <el-table-column type="selection" align="center" width="55"> </el-table-column>
              <el-table-column type="index"
                               :index="(index)=>(req[activeName].pageNum - 1) * req[activeName].pageSize + index + 1"
                               label="序号" width="100" align="center"></el-table-column>
              <el-table-column prop="createDate" :formatter="fmt" label="创建时间" width="200"></el-table-column>
              <el-table-column prop="outstockNumber" label="领料单号"></el-table-column>
</el-table>

2. handleSelectionChange()

val.forEach(item =>{
    if(!this.multipleSelection.some(i => i.id == item.id)){
          this.multipleSelection.push(item);
    }
})

this.multipleSelection = this.multipleSelection.filter(i => {
    return !this.list[0].some(j=>j.id==i.id) || val.some(j=>j.id==i.id)
})

3.http_list this.uuid = this.guid()

http_list() {
      // *** 重点***
      this.uuid = this.guid()
      // 查询回退列表
      this.$http.post("purMaterials/proOutStockistributionList", {
        ...this.req[this.activeName],
        pageNum: this.req[this.activeName].pageNum + '',
        pageSize: this.req[this.activeName].pageSize + ''
      }).then((res) => {
        this.$set(this.list, this.activeName,res.data.list)
        this.$set(this.req[this.activeName],'total',res.data.total)
        // 回勾
        this.setSelected()
      })
},
setSelected(){
      this.$refs.mytable.clearSelection()
      this.$nextTick(() => {
        this.multipleSelection.forEach(i => {
          let item = this.list[0].find(j => j.id == i.id)
          if (item) {
            this.$refs.mytable.toggleRowSelection(item, true)
          }
        })
      })
},
guid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,  (c)=> {
        let r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
},

4. 能取消勾选靠的是栈内存指向同一个堆内存

<el-table key="a" :data="multipleSelection" border stripe>
          <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="outstockNumber" label="领料单号"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a class="handle-btn" @click="handleClose(scope.$index)"><i
                  class="glyphicon glyphicon-download"></i>删除</a>
            </template>
          </el-table-column>''
</el-table>

handleClose(index){
      let item = this.list[0].find(i => i.id== this.multipleSelection[index].id)
      if(item){
        this.$refs.mytable.toggleRowSelection(item,false)
      }
      this.multipleSelection.splice(index, 1);
},