为什么element plus的表单通过#default可以访问到当前行的内容

为什么element plus的表单通过#default可以访问到当前行的内容

在 Element Plus 的 组件中,使用作用域插槽 #default 可以访问到当前行数据的原因是:

1. 的默认插槽会通过 props 传递一个对象参数。
2. 这个对象中包含了当前行 row、列 column、行索引 index 等数据。
3. 使用 #default="scope" 可以将这个对象参数定义为 scope 变量。
4. 所以在插槽模板中可以通过 scope.row 访问到当前行数据。

具体机制是:

 <el-table>
   <template #default="scope">
     <!-- scope 中包含当前行数据 -->
     {{ scope.row }}
   </template>
 </el-table>

 // el-table 的默认插槽对象参数
 {
   row: { /* 当前行数据 */ },
   column: {}, 
   index: 0
 }

所以 Element Plus 使用了作用域插槽技术,通过 props 传递了当前行数据。

我们通过 #default 定义了一个插槽作用域变量 scope 来接收这些数据,这样就可以方便地使用当前行数据进行自定义渲染了。