toggleRowSelection换页勾选丢失问题

多选

单选

完整范例代码

<style lang="scss">
.current table thead {
  .el-table__cell:first-child .cell {
    .el-checkbox {
      display: none;
    }
  }
}
</style>
<template>
  <el-dialog
    :visible.sync="open"
    title="选择"
    width="60%"
  >
    <div class="comment-container gy-table-sort">
      <div class="search-div">
        <el-form inline>
          <el-form-item>
            <el-input
              v-model.trim="schData.filter_fieldFour"
              placeholder="请输入编号"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" @click="refreshTab">重置</el-button>
            <el-button icon="el-icon-search" type="primary" @click="searchTab">搜索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="comment-table mt30">
        <el-table
          :class="{'current': radioType}"
          ref="multipleTable"
          v-loading="loading"
          border
          :data="tableData"
          @select="selectChange"
          @select-all="selectAllChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="id" label="编号" />
          <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
              {{ scope.row.name || '--' }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > 0"
          background
          layout="prev, pager, next, sizes"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :current-page.sync="pageIndex"
          :total="total"
          class="pagination"
          @size-change="loadData"
          @current-change="loadData"
        />
        <el-button style="display:block;margin: 20px auto 0" :disabled="submitDisable" type="primary" @click="submit">确认</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { RoomGetListByGroup } from '@/api/userRoom'
export default {
export default {
  name: 'HouseDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    radioType: {  // 是否单选
      type: Boolean,
      default: false
    },
    houseData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      schData: {},
      total: 0,
      pageIndex: 1,
      pageSize: 5,
      pageSizes: [5, 10, 15],
      tableData: [],
      loading: true,
      selectedList: [],
      submitDisable: false
    }
  },
  computed: {
    open: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('update:showDialog', val)
      }
    }
  },
  watch: {
    open(val) {
      this.ruleForm = {}
      if (val) {
        this.ruleForm = this.formData
        this.selectedList = this.houseData
        this.pageIndex = 1
        this.pageSize = 5
        this.loadData()
      }
    },
  },
   methods: {
    searchTab() {
      this.pageIndex = 1
      this.loadData()
    },
    refreshTab() {
      this.schData = {}
      this.pageIndex = 1
      this.pageSize = 10
      this.loadData()
    },
    // 列表
    loadData() {
      this.loading = true
      const { pageIndex, pageSize, proNodeId } = this
      RoomGetListByGroup({
        pageSize,
        pageIndex,
        filter_fieldone: proNodeId,
        filter_fieldThirteen: '0,3,4',
        ...this.schData
      })
        .then((res) => {
          this.loading = false
          if (res.success) {
            this.total = res.response.dataCount
            this.tableData = res.response.data
            this.updateMark()
            this.loading = false
          }
        })
        .catch((err) => {
          this.loading = false
          this.$message.error(err.msg || err.message || '获取列表失败！')
        })
    },
    // 单行前的勾选状态切换
    selectChange(selectedRows, row) {
      // true为选中, 0或false为取消选中
      const selected = selectedRows.length && selectedRows.indexOf(row) !== -1
      if (selected) {
        this.addItem(row)
      } else {
        this.removeItem(row)
      }
    },
    // 全选/取消全选
    selectAllChange(selectedRows) {
      const selectedMarkList = this.selectedList.map((item) => item.id)
      // 当前页选中行的标记列表
      const pageSelectedMarkList = Array.isArray(selectedRows)
        ? selectedRows.map((item) => item.id)
        : []

      this.tableData.forEach((row) => {
        if (pageSelectedMarkList.includes(row.id)) {
          if (!selectedMarkList.includes(row.id)) {
            this.addItem(row)
          }
        } else if (selectedMarkList.includes(row.id)) {
          this.removeItem(row)
        }
      })
    },
    // 更新勾选标记
    updateMark() {
      const selectedMarkList = this.selectedList.map((item) => item.id)
      this.tableData.forEach((row) => {
        if (selectedMarkList.includes(row.id)) {
          // toggleRowSelection 需在$nextTick中使用！
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        }
      })
    },
    // 新增选中项
    addItem(item) {
      if (this.radioType) {
        this.selectedList = [{
          id: item.id,
          roomNumber: item.roomNumber,
          ownersNames: item.ownersNames,
          status: item.status
        }]
        this.$refs.multipleTable.clearSelection()
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleRowSelection(item)
        })
      } else {
        this.selectedList.push(item)
      }
    },
    // 移除选中项
    removeItem(item) {
      for (const [index, itemTemp] of this.selectedList.entries()) {
        if (itemTemp.id === item.id) {
          this.removeItemByIndex(index)
          break
        }
      }
    },
    // 根据下标移除选中项
    removeItemByIndex(index, item) {
      this.selectedList.splice(index, 1)

      // 若有item,则是点击标签上的关闭按钮，移除选中项
      if (item) {
        this.$nextTick(() => {
          this.$refs.multipleTable.toggleRowSelection(
            // 此处必须在 tableData 中查找对应的数据，否则 toggleRowSelection 会失效
            this.tableData.find((row) => {
              return row.id === item.id
            }),
            false
          )
        })
      }
    },
    submit() {
      if (this.selectedList.length === 0) return this.$message.error('请选择')
      this.$emit('submit', this.selectedList)
    }
  }
}

<!-- 选择房屋 -->
<house-dialog
  :show-dialog.sync="showHouseDialog"
  :house-data="ruleForm.roomids"
  @submit="submitDialog"
/>