el-table分页+多选+回显

弹窗效果如图所示

image.png

想要实现每页都可以选中的数据到右侧“已选择小区”，并回显，就不单单是单选直接push全选直接等于

<el-dialog title="选择所属小区" :visible.sync="isShow" @on-cancel="cancel" class="commDialog" :close-on-click-modal="false">
  <div class="modal-dept">
    <!-- 左侧分页列表 -->
    <div>
      <h2>请选择小区</h2>
      <div>
        <el-table
            class="table_bg"
            ref="multipleTable"
            :data="options.list"
            tooltip-effect="dark"
            style="width: 100%"
            @select="curSelect"
            @select-all="commSelectAll"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="小区名称" />
        </el-table>
      </div>
    </div>
    <!-- 右侧已选中的列表 -->
    <div>
      <h2>已选择小区</h2>
        <div class="tags_box">
          <el-tag v-for="(tag, ind) in openItem" :key="ind">{{ tag.name }}</el-tag>
        </div>
      </div>
    </div>
</el-dialog>

<script>
    // 获取所属小区列表
    async getCommList() {
      const { succ, data, msg } = await getUnrelatedList({
        enterpriseUuid: this.currentCommunity.uuid,
        employeeUuid: this.employeeUuid,
        pageNum: this.options.pageNum,
        pageSize: this.options.pageSize
      })
      if (succ) {
        this.options.list = data.list
        this.options.total = data.total
        // 列表当前页回显是否选中
        this.toggleRowSelection(this.openItem)
      } else {
        this.$message.error(msg || '系统异常，请稍后再试！')
      }
    },
    // 当前选择的小区
    curSelect(selection, row) {
      if (this.openItem.length > 0) {
        // 判断是否存在 若存在，删除  若未存在，则添加
        const flag = this.openItem.some((it) => row.uuid === it.uuid)
        if (flag) { // 存在，再次点击则是取消选中
          this.openItem.map((it, index) => {
            if (row.uuid === it.uuid) {
              this.openItem.splice(index, 1)
            }
          })
        } else { // 不存在，添加至选中数组
          this.openItem = this.openItem.concat(row)
        }
      } else { // 当选中数组为空时，直接添加
        this.openItem.push(row)
      }
    },
    // 选择所属小区 - 全选事件
    commSelectAll(selection) {
      // 当全部选中时
      if (selection.length !== 0) {
        let arr = this.openItem.concat(selection) // 合并数组
        let arrNew = new Set(arr) // 通过set集合去重
        this.openItem = Array.from(arrNew)
      } else { // 当前页全不选时获取当前列表的数组
        let newArr = []
        // 从选中的数组中删除 全不选的数组
        let toRemove = this.options.list
        // 过滤
        newArr = this.openItem.filter((x) => !toRemove.some((item) => x.uuid === item.uuid))
        this.openItem = newArr
      }
    },
    // 小区列表切换状态
    toggleRowSelection(rows) {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection()
        if (!rows || rows.length === 0) { return }
        rows.forEach((row) => {
          // 检测是否存在
          const index = this.getIndex(row.uuid)
          // 不存在
          if (index === -1) { return }
          // 存在，遍历循环时把el-table此行的selection置为true
          this.$refs.multipleTable.toggleRowSelection(this.options.list[index], true)
        })
      })
    },
    // 获取已关联的options.list小区列表中的下标
    getIndex(selectId) {
      let index = -1
      for (let i = 0; i < this.options.list.length; i++) {
        const item = this.options.list[i]
        if (item.uuid === selectId) {
          index = i
          continue
        }
      }
      return index
    }
</script>

这几个函数中，我收获最大的就是熟练运用Array.some()和Array.every()，让我简单通过一行代码解决了遍历（map / for / forEach）+ if 判断，以及熟练运用el-table的selection切换选中/未选中状态。

分享：路漫漫其修远兮，吾将上下而求索。