vue3+iview点击外部编辑按钮根据table表格选中的下标进行编辑

您可以按照以下步骤来实现根据表格选中的下标进行编辑：

1. 在 data 中定义一个变量 selectedRowIndex，用于存储选中的行的下标。

data() {
  return {
    selectedRowIndex: -1, // 初始值为-1，表示没有选中任何行
    // 其他数据...
  };
}

2. 在表格中添加选中行的样式，并为每行绑定一个点击事件，将选中的行的下标存储到 selectedRowIndex 中。

<template>
  <table>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index" :class="{ 'selected-row': index === selectedRowIndex }" @click="handleRowClick(index)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="handleEditClick(index)">编辑</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  methods: {
    handleRowClick(index) {
      this.selectedRowIndex = index;
    },
    handleEditClick(index) {
      // 处理编辑事件，例如显示编辑框
    }
  }
}
</script>

<style>
.selected-row {
  background-color: #f0f0f0;
}
</style>

3. 在编辑框中显示选中行的数据，并将修改后的数据保存到对应的行中。

<template>
  <div v-show="isEditing">
    <input v-model="editName">
    <input v-model="editAge">
    <button @click="handleSaveClick">保存</button>
    <button @click="handleCancelClick">取消</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 其他数据...
      editName: '',
      editAge: '',
      // 其他数据...
    };
  },
  methods: {
    handleEditClick(index) {
      this.selectedRowIndex = index;
      this.editName = this.tableData[index].name;
      this.editAge = this.tableData[index].age;
      // 显示编辑框
    },
    handleSaveClick() {
      this.tableData[this.selectedRowIndex].name = this.editName;
      this.tableData[this.selectedRowIndex].age = this.editAge;
      // 隐藏编辑框
    },
    handleCancelClick() {
      // 隐藏编辑框
    }
  }
}
</script>

通过以上步骤，您可以实现根据表格选中的下标进行编辑的功能。