如何在 Vue 中的表格中选择并更新单行数据

在 Vue 中使用 el-table 组件时，您可以通过修改 handleUpdate 方法并添加条件判断来实现选择表格中的一行并进行更新操作。

以下是实现方法的代码示例：

handleUpdate(row) {
  this.reset();
  const reportingPeriodDate = this.selection.map((item) => item.reportingPeriodDate);

  if (!row && this.selection.length !== 1) {
    this.$message.warning('请选择要修改的数据项');
    return;
  }

  const selectedRow = row || this.selection[0];
  this.params.companyId = this.companyId;
  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 = '修改综合所得申报-稿酬所得';
  });
},

在 handleUpdate 方法中，我们添加了一个条件判断，检查 row 是否为空，并且 selection 的长度是否为 1。如果满足条件，则显示警告消息并返回。

如果不满足条件，我们将选中的行赋值给 selectedRow 变量。然后，使用 selectedRow 而不是 row 来进行更新逻辑。

请确保将 handleUpdate 方法中的代码更新到您的代码中。

完整代码示例：

handleUpdate(row) {
  this.reset();
  const reportingPeriodDate = this.selection.map((item) => item.reportingPeriodDate);

  if (!row && this.selection.length !== 1) {
    this.$message.warning('请选择要修改的数据项');
    return;
  }

  const selectedRow = row || this.selection[0];
  this.params.companyId = this.companyId;
  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" />
</el-table>

通过以上代码示例，您可以轻松实现选择表格中单行数据并进行更新操作。