带搜索表格的复选框按钮 实现搜索之后勾选的数据实存

 

     <el-table
              ref="multipleTable"
              v-loading="dtLoading"
              height="calc(100vh - 192px)"
              :data="dtShowData"
              tooltip-effect="light"
              stripe
              @select-all="selectAll"
              @select="handleSelectionChange"  //使用@select事件
            >
     </el-table>

    selectAll(value) {
      if (value.length === 0) {
        this.newData = []
        this.$refs.multipleTable.clearSelection()
      } else {
        this.newData = value
      }
    },

    handleSelectionChange2(val, item) {
      var index = -1
      for (let i = 0; i < this.newData.length; i++) {
        if (this.newData[i].viewName === item.viewName) {
          index = i
        }
      }
      if (index > -1) {
        this.newData.splice(index, 1)
      } else { this.newData.push(item) }
    },  

//在后端接口重新获取数据时
接口 
.then(res=>{
          this.dtData = res
          this.dtShowData = res

          if (!this.selectStatus) {
           //第一次进来走
            this.dtShowData.forEach((item) => {
              this.$nextTick(() => {
                if (item.flag) {
                  this.$refs.multipleTable.toggleRowSelection(item, true)
                  this.newData.push(item)
                }
              })
            })
            this.selectStatus = 1
          } else {

           //根据handleSelectionChange2 事件得到的数组来匹配渲染的数组 匹配到相同的设置为勾选状态
            for (let k = 0; k < this.dtShowData.length; k++) {
              this.dtShowData[k].flag = false
              for (let i = 0; i < this.newData.length; i++) {
                if (this.newData[i].viewName === this.dtShowData[k].viewName) {
                  this.dtShowData[k].flag = true
                }
              }
            }

            this.dtShowData.forEach((item) => {
              this.$nextTick(() => {
                if (item.flag) {
                  this.$refs.multipleTable.toggleRowSelection(item, true)
                }
              })
            })
          }
        }
    })