基于Element Plus二次封装的表格组件中添加插槽-实现内容自定义

项目中因为涉及一些特殊需求，所以对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"用来定义具名插槽名称。

2 父组件中代码：

拿其中一条进行举例：

其中#banana为v-slot:banana的简写，其等号后面的值为接受的所有属性的值，格式为{aa:{},bb:{}},虽然只传了item，在这里的数据形式也为{item:{}},所以通过{item}的形式获取到item中的值。