el-table 中自定义单元格的显示内容（具名插槽、默认插槽）

<template #default="{ row }">{{ row.gender? '男' : '女' }}</template> 这种写法和之前 <template slot - scope="scope">{{ scope.row.gender? '男' : '女' }}</template> 的写法本质上非常相似，都是用于在 el-table 中自定义单元格的显示内容，但在语法和使用场景上有一些细微区别：

语法区别

• slot - scope 写法：在 Vue 2 中，slot - scope 是用于在具名插槽中获取父组件传递过来的数据的方式。例如在 el-table 的 el-table-column 中，通过 slot - scope="scope" 定义一个变量 scope，scope 对象包含了 row（当前行数据）、column（当前列数据）、$index（当前行索引）等属性，通过 scope.row 可以访问到当前行的具体数据。

<el-table-column label="性别"> 
    <template slot-scope="scope"> 
        {{ scope.row.gender? '男' : '女' }}
    </template> 
</el-table-column>

• #default 写法：这是 Vue 3 中具名插槽的语法糖。#default 表示默认插槽，{ row } 是解构赋值，直接从插槽的作用域上下文中提取出 row 属性。这种写法更加简洁直观。

<el-table-column label="性别">
    <template #default="{ row }">
        {{ row.gender? '男' : '女' }}
    </template>
</el-table-column>

使用场景区别

• slot - scope：在 Vue 2 项目中使用，这种语法是标准的具名插槽数据访问方式。如果项目使用的是 Vue 2 框架，那么只能使用 slot - scope 来实现对 el-table 单元格内容的自定义。
• #default：在 Vue 3 项目中使用，这种新的语法糖让代码看起来更加简洁，尤其是在需要提取多个属性时，解构赋值的方式更加清晰。例如，如果还需要访问 $index，可以写成 template #default="{ row, $index }"。

兼容性

• slot - scope：在 Vue 2 中完全支持，在 Vue 3 中也依然支持，但 Vue 3 更推荐使用新的语法糖。

• #default：是 Vue 3 引入的新语法，在 Vue 2 中不支持。

所以，如果你使用的是 Vue 3 项目，推荐使用 <template #default="{ row }">{{ row.gender? '男' : '女' }}</template> 这种更简洁的写法；如果是 Vue 2 项目，则只能使用 <template slot - scope="scope">{{ scope.row.gender? '男' : '女' }}</template>。