vue3中el-table怎么拿到rowIndex

在 Vue3 中，`el-table` 组件已经被废弃了，取而代之的是 `el-table` 的升级版 `el-table-v2` 或是 `el-table` 的替代品 `element-plus` 中的 `el-table` 组件。

对于 `el-table-v2`，可以在 `el-table-column` 组件的 `scopedSlots` 中拿到当前行的索引。示例如下：

<template>
  <el-table-v2 :data="tableData">
    <el-table-column label="序号" align="center" width="80">
      <template #default="{ $index }">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="年龄" prop="age" align="center"></el-table-column>
  </el-table-v2>
</template>

在上述代码中，通过 `$index` 可以拿到当前行的索引，然后加上 1 就可以得到当前行的序号。

对于 `element-plus` 中的 `el-table`，则可以在 `el-table-column` 组件的 `custom` 属性中传入一个函数，该函数的第一个参数就是当前行的数据对象，第二个参数就是当前行的索引。示例如下：

<template>
  <el-table :data="tableData">
    <el-table-column label="序号" align="center" width="80" :custom="renderIndex"></el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="年龄" prop="age" align="center"></el-table-column>
  </el-table>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 },
      ],
    }
  },
  methods: {
    renderIndex(row, index) {
      return index + 1
    },
  },
})
</script>

在上述代码中，定义了一个名为 `renderIndex` 的方法，该方法的第一个参数 `row` 就是当前行的数据对象，第二个参数 `index` 就是当前行的索引。在 `el-table-column` 组件的 `custom` 属性中传入该方法即可。