vue+element获取el-table某行的下标,根据下标操作数组对象方式

获取el-table某行的下标，可以通过以下步骤实现：

1. 为el-table设置:row-key属性，用于标识每行的唯一标识符，例如：

<el-table :data="tableData" :row-key="row => row.id">
  <!-- 表头和列内容 -->
</el-table>

1. 在需要获取下标的地方，通过this.$refs.table.$refs获取到el-table组件的实例，例如：

let table = this.$refs.table.$refs['table'];

1. 调用table实例的$el属性获取到el-table的根元素，再通过querySelectorAll方法获取到所有行的元素，例如：

let rows = table.$el.querySelectorAll('.el-table__row');

1. 遍历rows数组，判断当前行是否为目标行，如果是则返回该行的下标，例如：

let index = -1;
rows.forEach((row, i) => {
  if (row === targetRow) {
    index = i;
  }
});

1. 根据下标操作数组对象，例如：

this.tableData[index].name = '新名称';

示例1：通过@row-click事件获取点击行的下标，再根据下标操作数组对象

<template>
  <div>
    <el-table :data="tableData" :row-key="row => row.id" ref="table" @row-click="handleRowClick">
      <!-- 表头和列内容 -->
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          { id: 1, name: '张三', age: 20 },
          { id: 2, name: '李四', age: 30 },
          { id: 3, name: '王五', age: 40 },
        ]
      }
    },
    methods: {
      handleRowClick(row) {
        let table = this.$refs.table.$refs['table'];
        let rows = table.$el.querySelectorAll('.el-table__row');
        let targetRow = rows.find(r => r.dataset.rowKey === row.id.toString());
        let index = -1;
        rows.forEach((r, i) => {
          if (r === targetRow) {
            index = i;
          }
        });
        if (index >= 0) {
          this.tableData[index].name = '新名称';
        }
      }
    }
  }
</script>

示例2：通过自定义列组件的props获取行数据，再根据行数据操作数组对象

<template>
  <div>
    <el-table :data="tableData" :row-key="row => row.id">
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <name-input :row="scope.row" @input="handleNameInput"></name-input>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>
<script>
  import NameInput from '@/components/NameInput';
  export default {
    components: { NameInput },
    data() {
      return {
        tableData: [
          { id: 1, name: '张三', age: 20 },
          { id: 2, name: '李四', age: 30 },
          { id: 3, name: '王五', age: 40 },
        ]
      }
    },
    methods: {
      handleNameInput(row, value) {
        let index = this.tableData.findIndex(item => item.id === row.id);
        if (index >= 0) {
          this.tableData[index].name = value;
        }
      }
    }
  }
</script>