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

BillKu

已于 2025-05-19 07:54:08 修改

阅读量1.2k

点赞数 20

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-02-18 07:33:32 首次发布

本文链接：https://blog.csdn.net/BillKu/article/details/145695903

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

1. 写法区别

写法	特点
`#default="scope"`	接收完整的插槽作用域对象
`#default="{ row }"`	直接解构出 `row` 属性（ES6 对象解构语法）

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. 何时选择哪种写法？

场景	推荐写法	示例
只需要行数据时	`{ row }`（更简洁）	显示行内容、状态标签
需要行索引或其他属性时	`scope`（更完整）	需要显示行号（`scope.$index + 1`）
需要操作列配置时	`scope`	动态修改列样式、根据列属性判断逻辑

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);

总结

特性	`#default="scope"`	`#default="{ row }"`
可访问属性	所有属性（row/$index等）	仅解构出的属性（如row）
代码简洁性	需要 `scope.row` 访问	直接使用 `row`
适用场景	需要多属性操作时	只需行数据时
本质区别	无（同一对象的不同写法）