el-table 插槽踩过的坑 ：slot-scope 和#default的区别

slot-scope和#default是Vue中用于定义插槽的两种不同语法，它们在Vue 2和Vue 3中有不同的应用场景和语法规则。‌

slot-scope

在‌Vue 2.x‌中，slot-scope是用于声明具名插槽并获取父组件传递过来的数据的主要方式。通过slot-scope可以定义一个变量scope，该变量包含了当前行的数据（row）、列数据（column）和行索引（$index）等属性。例如：

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

在这种写法中，slot-scope是标准的具名插槽数据访问方式，适用于Vue 2项目‌1。

#default

在‌Vue 3.0‌中，#default是具名插槽的语法糖，提供了一种更简洁的方式来访问插槽数据。通过解构赋值，可以直接从插槽的作用域上下文中提取出需要的属性。例如：

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

这种写法在需要提取多个属性时更加清晰和简洁，尤其是当需要访问index时，可以写成`template #default="{ row, $index }"`‌1。

使用场景和语法区别

• ‌slot-scope‌：适用于‌Vue 2‌项目，是标准的具名插槽数据访问方式。如果项目使用Vue 2框架，必须使用slot-scope来实现对el-table单元格内容的自定义‌1。
• ‌#default‌：适用于‌Vue 3‌项目，提供了更简洁的语法糖，尤其适合需要提取多个属性的场景。这种新的语法让代码看起来更加简洁，尤其是在需要提取多个属性时，解构赋值的方式更加清晰‌1。