Vue.js Element UI 表格：实现多选行数据修改功能

本示例展示如何使用 Vue.js 和 Element UI 框架实现表格中多选行的修改功能。

代码示例：

// ... 其他代码

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>
    <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-column prop='acTaxPiPersonVo.employeeId' label='工号' align='center'>
      </el-table-column>
      <el-table-column prop='acTaxPiPersonVo.name' label='姓名' align='center'>
      </el-table-column>
      <el-table-column prop='acTaxPiPersonVo.identificationType' label='证件类型' align='center'>
        <template slot-scope='scope'>
          <span>{{ geIdentificationType(scope.row.acTaxPiPersonVo.identificationType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop='acTaxPiPersonVo.identificationNum' label='证件号码' align='center'>
      </el-table-column>
      <el-table-column prop='incomeProject' label='所得项目' align='center'>
      </el-table-column>
      <el-table-column prop='grantDeductDonate' label='准予扣除的捐赠额' align='center'>
      </el-table-column>
      <el-table-column prop='writeStatus' label='填写状态' align='center'>
        <template slot-scope='scope'>
          {{ scope.row.writeStatus == 0 ? '未填写' : '已填写' }}
        </template>
      </el-table-column>
      <el-table-column prop='remark' label='备注' align='center'>
      </el-table-column>
      <el-table-column prop='isOperate' label='操作' align='center'>
        <template slot-scope='scope'>
          <span style='color: #235bda; cursor: pointer' @click='fill(scope.row)'>填写</span>
        </template>
      </el-table-column>
    </el-table>

说明：

handleSelectionChange(selection) 方法用于处理表格中的多选事件，获取选中的行数据 selection。
handleUpdate(row) 方法用于更新数据。参数 row 是选中的行数据。
在 handleUpdate(row) 方法中，可以访问选中的行数据 row，并执行相应的更新操作。

注意：

确保在 data 中定义 row 属性，并初始化为一个空对象 {}。
在模板中使用 @click='handleUpdate(selection[0])' 来调用 handleUpdate 方法，传入选中的第一行数据。

完整代码：

// ... 其他代码

// data 属性
data() {
  return {
    row: {}, // 定义 row 属性
    // ... 其他数据
  };
},

// 方法
methods: {
  handleUpdate(row) {
    // ...
  },
  // ... 其他方法
},

// 模板
<template>
  <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(selection[0])'>修改</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>
      <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-column prop='acTaxPiPersonVo.employeeId' label='工号' align='center'>
        </el-table-column>
        <el-table-column prop='acTaxPiPersonVo.name' label='姓名' align='center'>
        </el-table-column>
        <el-table-column prop='acTaxPiPersonVo.identificationType' label='证件类型' align='center'>
          <template slot-scope='scope'>
            <span>{{ geIdentificationType(scope.row.acTaxPiPersonVo.identificationType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop='acTaxPiPersonVo.identificationNum' label='证件号码' align='center'>
        </el-table-column>
        <el-table-column prop='incomeProject' label='所得项目' align='center'>
        </el-table-column>
        <el-table-column prop='grantDeductDonate' label='准予扣除的捐赠额' align='center'>
        </el-table-column>
        <el-table-column prop='writeStatus' label='填写状态' align='center'>
          <template slot-scope='scope'>
            {{ scope.row.writeStatus == 0 ? '未填写' : '已填写' }}
          </template>
        </el-table-column>
        <el-table-column prop='remark' label='备注' align='center'>
        </el-table-column>
        <el-table-column prop='isOperate' label='操作' align='center'>
          <template slot-scope='scope'>
            <span style='color: #235bda; cursor: pointer' @click='fill(scope.row)'>填写</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-table>
</template>

通过以上步骤，你就可以成功实现 Vue.js Element UI 表格中多选行的修改功能。