一个el-table怎么获取父级el-table的data数据的下标

在获取父级`el-table`的`data`数据的下标之前，您需要确定要获取哪个父级`el-table`的`data`数据下标。如果您已经确定了父级`el-table`的`data`下标，您可以使用以下方法来获取它：

1. 在子级`el-table`的`row-click`事件中，可以通过`$parent.$attrs.row`访问到父级`el-table`的当前行数据。您可以通过遍历父级`el-table`的`data`数组找到该行数据的下标。

<template>
  <div>
    <el-table :data="parentTableData" @row-click="handleRowClick">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-table :data="childTableData" :parent="$attrs.row">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentTableData: [
        { name: 'Lucy', age: 20 },
        { name: 'Jack', age: 30 }
      ],
      childTableData: [
        { name: 'Tom', age: 25 },
        { name: 'Jerry', age: 35 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      const index = this.parentTableData.findIndex(item => item === row)
      console.log('parent table data index:', index)
    }
  }
}
</script>

2. 如果您无法确定要获取哪个父级`el-table`的`data`下标，您可以在父级`el-table`中通过`$emit`方法触发一个自定义事件，并将当前行数据和当前`el-table`的引用作为参数。在子级`el-table`中监听该自定义事件，获取父级`el-table`的引用，从而获取父级`el-table`的`data`下标。

<template>
  <div>
    <el-table :data="parentTableData" @row-click="handleRowClick">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-table :data="childTableData" ref="childTable">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentTableData: [
        { name: 'Lucy', age: 20 },
        { name: 'Jack', age: 30 }
      ],
      childTableData: [
        { name: 'Tom', age: 25 },
        { name: 'Jerry', age: 35 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      this.$emit('parent-row-click', row, this.$refs.childTable)
    }
  }
}
</script>

<template>
  <div>
    <el-table :data="childTableData" @parent-row-click="handleParentRowClick">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childTableData: [
        { name: 'Tom', age: 25 },
        { name: 'Jerry', age: 35 }
      ]
    }
  },
  methods: {
    handleParentRowClick(row, parentTable) {
      const index = parentTable.store.states.data.indexOf(row)
      console.log('parent table data index:', index)
    }
  }
}
</script>