Vue.js表格组件中获取选中行数据并修改

在Vue.js开发中，我们经常需要使用表格组件来展示数据。当需要对表格中的数据进行修改时，通常需要先获取选中行的信息。本文将介绍如何在Vue.js表格组件中获取选中行数据并进行修改操作。

问题描述

假设我们有一个表格组件，其中包含一个handleUpdate方法用于修改选中行的数据。在handleUpdate方法中，我们期望获取row变量，该变量表示当前选中的行数据。然而，在实际开发中，我们可能会遇到Property or method 'row' is not defined on the instance but referenced during render错误。

解决方案

该错误提示row变量在渲染时没有定义，我们需要将row变量定义在组件的数据选项中，或者在类组件中将其初始化为一个属性。

例如，我们可以将row变量定义在组件的数据选项中：

 data() {
  return {
    row: null,
    // 其他数据属性
  }
},

然后，在handleUpdate方法中，我们可以使用this.row来访问选中行的信息。

代码示例

以下代码示例展示了如何在Vue.js表格组件中获取选中行数据并进行修改操作。

<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" />
    </el-table>
  <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>
</template>

<script>
export default {
  data() {
    return {
      row: null,
      tableData: [],
      selection: [],
      ids: [],
      single: false,
      multiple: false,
      params: {
        companyId: '',
        reportingPeriodDate: '',
        incomeReportingCode: '',
        searchValue: '',
      },
    }
  },
  methods: {
    handleUpdate(row) {
      this.reset();
      const reportingPeriodDate = this.selection.map((item) => item.reportingPeriodDate);
      console.log(row, 'rowwww');
      this.params.companyId = this.companyId;
      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;
    },
  }
}
</script>

总结

在Vue.js表格组件中获取选中行数据并进行修改操作时，需要确保row变量在组件中被定义或初始化。通过定义row变量并使用this.row来访问选中行的信息，我们就可以顺利地完成数据修改操作。

希望本文能帮助您更好地理解在Vue.js表格组件中如何获取选中行数据并进行修改操作。