您现在的位置是：网站首页> 编程资料编程资料

vue elementui二次封装el-table带插槽问题_vue.js_

2023-05-24 190人已围观

简介 vue elementui二次封装el-table带插槽问题_vue.js_

elementui二次封装el-table带插槽

子组件table封装 html部分

js部分

在父组件中使用 html 代码

js代码部分

这里基本的使用都可以满足，里面包含表列的：自定义插槽；表格选择器；表格序号以及多级表头的渲染。

通用样式一般根据定制的格式来写，一般来说表格基本格式都是一样的，也有可能会出现表格的表头行高，表格的行高内容不一样的情况，也可通过配置参数来处理。

element-ui table组件的二次封装(插槽的形式)

由于业务需求，对el-table组件进行了二次封装，封装分为两层，两个组件嵌套，也能够单独使用

篇幅原因简单的JS逻辑处理没有贴上来了

1.外层table组件封装

                                                 新建

核心代码是这一段，通过插槽的形式，显示需要特殊处理的字段

外层组件table-view使用示例

                {{ getType(row.templateType) }}       
                {{ getStatus(row.templateStatus) }}

2.内层table组件代码

                                                                                                                          提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：JS实现Tab栏切换的两种方式案例详解_javascript技巧_
                                                                下一篇：实现一个Vue版Upload组件_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

vue elementui二次封装el-table带插槽问题_vue.js_

目录

elementui二次封装el-table带插槽

element-ui table组件的二次封装(插槽的形式)

1.外层table组件封装

2.内层table组件代码

相关内容

点击排行

本栏推荐

猜你喜欢