Vue.js 表格多选修改操作：获取选中行数据和解决`row`为undefined的问题

Vue.js 表格多选修改操作：获取选中行数据和解决row为undefined的问题

在使用 Vue.js 开发表格组件时，经常需要实现多选修改功能，即用户可以选择多行数据进行修改。本文将介绍如何实现该功能，并重点解决一个常见问题：row变量为undefined。

代码示例

handleUpdate(row) {
  this.reset();
  const reportingPeriodDate = this.selection.map((item) => item.reportingPeriodDate);
  // if ((!row && !id.length) || id.length === 0) {
  //   this.$message.warning('请先选中要修改的数据项');
  //   return;
  // }
  console.log(row, 'rowwww');
  // const ids = row.id || this.ids;
  this.params.companyId = this.companyId;
  // this.params.reportingPeriodDate = this.reportingPeriodDate;
  this.params.incomeReportingCode = this.incomeReportingCode;
  editReportingDonationDeduction(this.params, reportingPeriodDate).then((response) => {
    console.log(response, '修改综合所得申报');
    this.form = response.data;
    console.log(this.form, '修改综合');
    this.open = true;
    this.title = '修改综合所得申报-稿酬所得';
  });
},

// 多选框选中数据
handleSelectionChange(selection) {
  this.selection = selection;
  console.log(selection, 'selectionsss');
  this.ids = selection.map((item) => item.personId);
  this.single = selection.length !== 1;
  this.multiple = !selection.length;
},

<el-table
  ref="multipleTable"
  :data="tableData"
  @selection-change="handleSelectionChange"
  border
  style="width: 100%; margin-top: 20px"
>
  <el-table-column type="selection" width="55" align="center" />
  <div style="margin-top: 20px">
    <el-button class="btnClass" size="mini" @click="closeView">
      返回
    </el-button>
    <el-button class="btnClass" size="mini">导入</el-button>
    <el-button class="btnClass" size="mini">导出</el-button>
    <el-button class="btnClass" size="mini" @click="handleUpdate(row)">
      修改
    </el-button>
    <el-input
      size="mini"
      v-model="params.searchValue"
      @blur="handleBlur"
      style="width: 276px; margin-right: 10px"
    ></el-input>
    <el-button size="mini" class="btnClass">查询</el-button>
  </div>
</el-table>

问题分析

代码中handleUpdate方法的row参数代表当前选中行的数据，但是运行时发现row总是为undefined。这可能是由于以下原因导致的：

1. **handleUpdate方法调用时没有传入row参数：**如果handleUpdate方法不是在el-table组件的事件中调用，或者没有正确地传入row参数，那么row将为undefined。
2. **row变量在方法调用之前没有被正确赋值：**如果row变量在调用handleUpdate方法之前没有被赋值，那么它也会为undefined。
3. **row参数在方法调用时被覆盖或修改：**如果在调用handleUpdate方法之前，row参数被覆盖或修改，那么传入handleUpdate方法的row参数将不是预期值，也可能导致row为undefined。

解决方法

为了解决row为undefined的问题，可以尝试以下方法：

1. **确保handleUpdate方法在el-table的事件中被调用，并正确传入row参数：**例如，可以将handleUpdate方法绑定到el-table的row-click事件。
2. **在调用handleUpdate方法之前，确保row变量已经被正确赋值：**可以使用el-table的current-row属性来获取当前选中行的数据，并将其赋值给row变量。
3. **避免在调用handleUpdate方法之前修改row参数：**如果需要修改row参数，请在调用handleUpdate方法之后进行。

总结

本文介绍了如何使用 Vue.js 实现表格多选修改操作，并重点解决了row变量为undefined的问题。希望本文能帮助读者更好地理解和解决相关问题。