Vue.js 中使用 El-dropdown 组件获取 row 数据的解决方法

在使用 Element UI 的 El-dropdown 组件时，您可能会遇到在 handleCommand2 方法中无法获取 row 数据的错误：TypeError: Cannot read properties of undefined (reading 'row')。

这个问题通常是由于事件绑定错误导致的。<el-dropdown> 组件的 command 事件应该绑定到 handleCommand2 方法上，而不是 @command。

以下是修改后的代码：

<el-dropdown trigger="click" @command="handleCommand2">
  <span class="el-dropdown-link">
    更多操作<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="handleDelete">删除</el-dropdown-item>
    <el-dropdown-item command="clearData">数据清除</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

在 handleCommand2 方法中，可以使用 scope.row 获取 row 数据：

handleCommand2(command, row) {
  switch (command) {
    case "handleDelete":
      this.handleDelete(row);
      break;
    case "clearData":
      this.clearData();
      break;
    default:
      break;
  }
},

通过这种方式，您就可以在 handleCommand2 方法中正常获取 row 数据并执行相关操作。

另外，您还需要检查 handleDelete 方法中 row.personId 的值是否为 undefined。如果 row.personId 为 undefined，则会导致 TypeError: Cannot read properties of undefined (reading 'personId') 错误。您可以在 handleDelete 方法中添加判断逻辑，如果 row.personId 为 undefined，则使用 this.ids 作为替代。

handleDelete(row) {
  console.log(row, 'rowwww');
  const personIds = row.personId || this.ids;
  this.$confirm(
    '是否确认删除综合所得申报-稿酬所得编号为' + personIds + '的数据项?',
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(function () {
      return delReportingRoyaltiesIncome(personIds);
    })
    .then(() => {
      this.getList();
      this.msgSuccess("删除成功");
    })
    .catch(() => {});
},

通过以上方法，您可以解决在 Vue.js 项目中使用 El-dropdown 组件获取 row 数据时遇到的错误。