为什么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 来接收这些数据,这样就可以方便地使用当前行数据进行自定义渲染了。