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

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

vue

复制

下载

编辑

具体说明：

1. 索引属性名错误：

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

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

2. 推荐验证方式：

   vue

   复制

   下载

scope 对象

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

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

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

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

2. 更健壮的写法建议：

vue

复制

下载

编辑

完整修正后的代码：

vue

复制

下载

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

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

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

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