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-button
      type="primary"
      size="default"
      text
      @click="onModifyClick(scope.$index, scope.row)"
    >编辑</el-button>
    
    <el-button
      type="danger"
      size="default"
      text
      @click="onDeleteClick(scope.row.materialNo)"
    >删除</el-button>
  </template>
</el-table-column>

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

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

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

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