＜ element-Ui表格组件：表格多选功能回显勾选时因分页问题，导致无法勾选回显的全部数据＞-Toy模板网

这篇具有很好参考价值的文章主要介绍了＜ element-Ui表格组件：表格多选功能回显勾选时因分页问题，导致无法勾选回显的全部数据＞。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementui多选框数据回显,vue.js,javascript,elementui

👉 前言

在 Vue + elementUi 开发中，elementUI中表格在本身是自带多选功能的，但是在某些情况下，并不能完全适用，甚至可能产生bug。例如本次案例所遇Bug，情景如下：

本案例场景：在表单中，通过表单参数筛选某个明细表格数据，后端要求新增时可多选明细表格中的内容。但由于明细列表存在分页的功能，在回显时，由于element表格提供的勾选函数（toggleRowSelection(cur, true)），因为数据不全面，只勾选了当前分页的内容。

且由于业务需要，通常在表格中多选方法中都会存储勾选的ID或其他数据的逻辑，这就导致第一次回显勾选的数据，因分页数据导致只勾选当前页中包含的明细，然后触发多选方法，覆盖了回显的数据，导致数据丢失！

接下来，简单阐述下，开发中使用的解决方法！方法并不适用，只提供解决思路，具体问题具体分析！仅供参考！

👉 一、解决思路

遇到这种问题，一般的思路是创建一个中间变量来暂存勾选的内容，但是由于业务复杂度问题，需要在前端切换业务域时，通过本地存储暂存当前相关数据，导致回显时，要考虑的逻辑较多，就排除了再新增变量存储的问题，而且也容易存错，导致二次数据覆盖！

回到问题本身，可以看得出来，是由于分页功能导致的数据回显时，勾选不全的问题。所以就这个问题，与后端沟通，添加 usePage参数，区分是否使用分页，在回显勾选内容的方法内调用，当然这种是基于数据量少的地方才能用，而且需要使用loading，避免长时间加载，导致用户以为页面卡死没数据的情况。

elementui多选框数据回显,vue.js,javascript,elementui

👉 二、实现代码（仅供参考，具体问题具体分析）

> HTML模板

<el-table
	ref="multipleTable"
	:data="tableData"
	tooltip-effect="light"
	:height="tableHeight"
	:max-height="tableHeight"
	:key="formData.ssywy + tableOption.length"
	style="width: 100%"
	v-loading="tableLoading"
	element-loading-text="拼命加载中"
	element-loading-spinner="el-icon-loading"
	element-loading-background="rgba(0, 0, 0, 0.8)"
	row-key="id"
	@selection-change="handleSelectionChange($event)"
>
	<el-table-column
		type="selection"
		width="55"
		reserve-selection
		fixed="left"
		align="center"
	></el-table-column>
</el-table>

<el-pagination
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="params.current"
	:page-sizes="[10, 50, 100, 200]"
	:page-size="params.size"
	background
	layout="prev, pager, next, sizes, jumper, total"
	:total="params.total"
></el-pagination>

> Js模板

// 明细列表多选
handleSelectionChange(val) {
	this.multipleSelection = val
	// window.console.log(this.formData.ywyAndRuleDTO, this.multipleSelection, val)
	this.formData.ywyAndRuleDTO[this.formData.ssywy].defectIds = Array.isArray(val) ? [...new Set(val.map(item => item.id))] : []
},
// 多选表格
async toggleSelection(v) {
  // window.console.log(this.formData.ywyAndRuleDTO, v, this.tableData)
  if (v.length !== 0) {
    let params = {
      ...this.params,
      ruleIds: this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.map(item => item.id),
      ywy: this.formData.ssywy,
      zrdwIds: this.formData.beCheckUnitIds.split(','),
      flag: this.formData.execStatus != undefined ? false : true,
      mark: 'export'
    };
    let rs = await this.riskReVerifyCheckDefectList(params)
    this.$refs["multipleTable"].clearSelection();
    this.tableData = rs.rows || [];
    v.forEach((item) => {
      let cur = this.tableData.find((item_1) => {
        return item === item_1.id;
      })
      if(cur) {
        this.$refs["multipleTable"].toggleRowSelection(cur, true);
      }
    });
  } else {
    this.$refs["multipleTable"].clearSelection();
  }
},
// 查询表格内容
async queryTableList(reset) {
  if (reset) {
    this.setPages();
  }
  
  let params = {
    ...this.params,
    ruleIds: this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.map(item => item.id),
    ywy: this.formData.ssywy,
    zrdwIds: this.formData.beCheckUnitIds.split(','),
    flag: this.formData.execStatus != undefined ? false : true
  };
  
  this.formData.ywyAndRuleDTO[this.formData.ssywy].selectDTO = JSON.parse(JSON.stringify(params))
  
  this.tableData = [];
  
  if(!this.formData.ssywy || Array.isArray(this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds) && this.formData.ywyAndRuleDTO[this.formData.ssywy].ruleIds.length === 0) {
    this.$message.warning('请先勾选对应业务域的规则信息！')
    return
  }
  this.tableLoading = true;
  
  // 通过异步操作，进行勾选
  await this.toggleSelection(this.formData.ywyAndRuleDTO[this.formData.ssywy].defectIds)
  
  this.riskReVerifyCheckDefectList(params)
    .then((rs) => {
      if (rs && Array.isArray(rs.rows) && rs.rows.length !== 0) {
        this.tableData = rs.rows;
        this.setPages(rs.current, rs.size, rs.records);
      } else {
        this.tableData = [];
        this.setPages();
      }
    })
    .finally(() => {
      this.tableLoading = false;
    });
},