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>

具体说明：

1. 索引属性名错误：

   • Element Plus 的表格作用域插槽暴露的是 $index 属性（带$符号），不是 index

   • scope.index 会得到 undefined，实际应该使用 scope.$index

2. 推荐验证方式：

   vue

   复制

   下载

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

scope 对象

1. 需要注意的特殊情况：

   • 当表格存在多级表头时，$index 对应的是数据数组的索引

   • 如果表格数据被过滤/排序后，$index 反映的是当前显示行的索引，不是原始数据索引

   • 对于需要绝对索引的场景，建议直接使用行数据的唯一标识（如你删除操作中使用的 materialNo）

2. 更健壮的写法建议：

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>

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

1. el-table 是否设置了 row-key

2. 表格数据是否是响应式数据（ref/reactive）

3. 是否使用了过滤/排序功能（这会改变显示行的索引）