Element Plus 的 ＜el-table-column＞ 中 #default=“scope”和#default=“{ row }” 的区别

在 Element Plus 的 <el-table-column> 中，#default="{ row }" 和 #default="scope" 本质上是相同的概念，区别在于 变量解构的写法 和 可访问属性的范围。以下是具体区别：

1. 写法区别

2. 可访问属性

假设数据对象结构为：

{
  row: {},     // 当前行数据
  $index: 0,   // 行索引
  column: {},  // 当前列配置
  // ...其他属性
}

通过 scope 访问：

<el-table-column>
<template #default="scope">
  {{ scope.row }}      <!-- 当前行数据 -->
  {{ scope.$index }}   <!-- 行索引 -->
  {{ scope.column }}   <!-- 列配置 -->
  {{ scope.cellIndex}} <!-- 单元格索引 -->
</template>
</el-table-column>

查看scope对象的详细信息：

通过解构 { row } 访问：

<template #default="{ row }">
  {{ row }}  <!-- 直接访问行数据 -->
  <!-- 无法访问 $index 或 column -->
</template>

3. 何时选择哪种写法？

4. 代码对比

使用 scope：

<el-table-column label="状态">
  <template #default="scope">
    <el-tag :type="scope.row.status ? 'success' : 'danger'">
      {{ scope.row.status ? '启用' : '禁用' }}
      (行号: {{ scope.$index + 1 }})
    </el-tag>
  </template>
</el-table-column>

使用 { row }：

<el-table-column label="状态">
  <template #default="{ row }">
    <el-tag :type="row.status ? 'success' : 'danger'">
      {{ row.status ? '启用' : '禁用' }}
    </el-tag>
  </template>
</el-table-column>

5. 本质原理

两者访问的是同一个作用域对象，只是通过解构语法提取了需要的属性。以下两种写法完全等价：

// 写法 1：完整对象
const scope = { row: {}, $index: 0, column: {} };
console.log(scope.row);

// 写法 2：解构赋值
const { row } = { row: {}, $index: 0, column: {} };
console.log(row);

总结

根据实际需求选择即可，如果需要行号或其他属性，用 scope；如果只需行数据，解构 { row } 更简洁。