Vue3 Element Plus 中el-table-column索引使用问题

在 Element Plus 的 el-table 组件中，使用 scope.index 是不准确的。正确的索引属性应该是 scope.$index。你的代码需要调整为：

vue

复制

下载

<el-button type="primary" size="default" text @click="onModifyClick(scope.$index, scope.row)"
>编辑</el-button>

具体说明：

索引属性名错误：
- Element Plus 的表格作用域插槽暴露的是 $index 属性（带$符号），不是 index
- scope.index 会得到 undefined，实际应该使用 scope.$index

推荐验证方式：

vue

复制

下载

<template #default="scope">{{ console.log(scope) }} <!-- 打印查看完整 scope 对象 -->
</template>

scope 对象

需要注意的特殊情况：
- 当表格存在多级表头时，$index 对应的是数据数组的索引
- 如果表格数据被过滤/排序后，$index 反映的是当前显示行的索引，不是原始数据索引
- 对于需要绝对索引的场景，建议直接使用行数据的唯一标识（如你删除操作中使用的 materialNo）
更健壮的写法建议：

vue

复制

下载

<el-button type="primary" size="default" text @click="onModifyClick(scope.$index, { ...scope.row, $index: scope.$index })"
>编辑</el-button>

完整修正后的代码：

vue

复制

下载

<el-table-column label="操作" header-align="center" align="center" fixed="right" width="120"
><template #default="scope"><el-buttontype="primary"size="default"text@click="onModifyClick(scope.$index, scope.row)">编辑</el-button><el-buttontype="danger"size="default"text@click="onDeleteClick(scope.row.materialNo)">删除</el-button></template>
</el-table-column>

如果发现索引值不符合预期，请检查：