基于Element Plus二次封装的表格组件中添加插槽 | 您所在的位置:网站首页 › day30二次元表格 › 基于Element Plus二次封装的表格组件中添加插槽 |
项目中因为涉及一些特殊需求,所以对Element Plus进行了二次封装,但是表格内容仅支持文本形式,如果要实现表格里面内嵌input,seletct等所有定制内容是无法实现的,所以针对这里进行了研究,最后通过具名插槽的方式实现了,具体实现如下: 目录 一 首先在二次封装的组件中添加插槽: 二 在引用组件里这样写: 三 具名插槽的具体用法: 一 首先在二次封装的组件中添加插槽:之前卡住的地方主要有两点,1是循环中有多个一样的具名插槽,2是具名插槽的父子组件之间传值 写demo进行了巩固: 1 子组件中代码: 其中:name="item.prop"用来定义具名插槽名称。 {{ one.title }} -- {{ one.prop }} {{ item.label }} export default { name:"sonSlot", props:{ list:{ type:Array, default: () => { return []; } } }, data(){ return { titleList:[ {title:"循环一"}, {title:"循环二"}, {title:"循环三"}, ] } } }2 父组件中代码: 拿其中一条进行举例:
其中#banana为v-slot:banana的简写,其等号后面的值为接受的所有属性的值,格式为{aa:{},bb:{}},虽然只传了item,在这里的数据形式也为{item:{}},所以通过{item}的形式获取到item中的值。 import sonSlot from "./sonSlot.vue"; export default { components: { sonSlot }, data(){ return { list:[ {title:"循环一",prop:"banana",isSlot:true}, {title:"循环二",prop:"apple",isSlot:true}, {title:"循环三",prop:"pear",isSlot:true}, {title:"循环四",prop:"durian",isSlot:true}, {title:"循环四",prop:"durian",isSlot:false}, ], dropData:[ {label:"香蕉",prop:"banana"}, {label:"苹果",prop:"apple"}, {label:"梨",prop:"pear"}, {label:"榴莲",prop:"durian"}, ] } } } |
CopyRight 2018-2019 实验室设备网 版权所有 |