526互联

element-ui 组件二次封装

发布时间 2023-06-04 12:47:29作者: GTK

习题链接

element-ui 组件二次封装

课程列表

修复bug，实现element ui组件中的单选功能。

关键点

  1. 作用域插槽（Scoped Slots）
    1. 在父组件中使用slot-scope="scope"指定了一个名为scope的变量，当然也可以使用其他名称
    2. 在插槽中就可以使用scope是点父组件中的数据
  2. Element UI组件的Radio组件属性
    1. 在Element UI中的radio组件，给label赋值其实就是设置的value值
    2. 都题目中提及“Scoped slot 获取到 row”
    3. 直接设置的slot-scope设置的scope，然后使用scope.row访问到当前行的数据
  3. 官网的作用域插槽
    1. 官网作用域插槽

代码实现 && 完整的代码

  1. 完整code
    <template slot-scope="scope"> 
    <el-radio v-model="currentRow" :label="scope.row">&nbsp;</el-radio>
</template>