基于Element Plus二次封装的表格组件中添加插槽 您所在的位置:网站首页 day30二次元表格 基于Element Plus二次封装的表格组件中添加插槽

基于Element Plus二次封装的表格组件中添加插槽

2024-07-12 12:07| 来源: 网络整理| 查看: 265

项目中因为涉及一些特殊需求,所以对Element Plus进行了二次封装,但是表格内容仅支持文本形式,如果要实现表格里面内嵌input,seletct等所有定制内容是无法实现的,所以针对这里进行了研究,最后通过具名插槽的方式实现了,具体实现如下:

目录

一 首先在二次封装的组件中添加插槽:

 二  在引用组件里这样写:

三 具名插槽的具体用法:

一 首先在二次封装的组件中添加插槽:

 二  在引用组件里这样写: dropColList: [ { label: "提案状态", // th prop: "abstatusname", // 提案名称 width: 140, // 列对应宽度 align: "left", // 列tbody对应对齐方式 headerAlign: "left", // 列thead对齐方式 resizable: true, // 是否可以调整列宽度 sortable: true, // 是否可以排序 fixed: false, // 是否固定 show: true, // 是否显示 disabled: false, isSlot: true,// 是否使用插槽 }, ... ] 三 具名插槽的具体用法:

之前卡住的地方主要有两点,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 实验室设备网 版权所有