element table多级表头

吥會為愛流淚

已于 2022-08-02 14:26:37 修改

阅读量770

点赞数 1

分类专栏：原创文章标签：前端 html javascript

于 2022-07-28 18:01:59 首次发布

本文链接：https://blog.csdn.net/gu19880609/article/details/126040138

版权

原创专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何使用Vue.js构建一个信息系统台账的需求，通过递归组件设计，展示了包括系统基本信息、数据对接情况和合同付款信息等内容。文章中提供了具体的代码示例，展示如何自定义列显示和过滤器功能，以实现复杂表格的动态展示。

摘要由CSDN通过智能技术生成

前言信息系统台账需求前言信息系统台账需求前言信息系统台账需求前言信息系统台账需

首先定义column组件利用递归实现组件并自定义显示column内容 fn函数和过滤器

props 传入的pageOption 序号

直接上代码

父组件使用

fileds部分代码

   {
        prop: 'a1', label: '政采信息化系统管理台账',align: 'center',
        children: [
            {
                prop: 'a2', label: '关键指标  合同金额  总合同付款金额  总合同付款比例  年度新增合同额  年度付款金额  年度付款比例',align: 'center',
                children:[
                    {label: '序号', type:"index"},
                    {
                        label:'项目基本情况',align: 'center', prop: 'a',
                        children: [
                            { prop: 'fullName', label: '系统简称', className: 'font-bold', align: 'left', width: 200, fixed: true },
                            { prop: 'cnName', label: '系统全称', className: 'font-bold', align: 'left', width: 250},
                            { prop: "dataProviderUnitInfo.shortName", label: "所属单位名称", width: 120 },
                            { prop: "developer", label: "开发单位名称", width: 180 },
                            { prop: "developerContact", label: "负责人", width: 100 },
                            { prop: "developerPhone", label: "联系方式", width: 100 },
                            { prop: 'dockingType', label: '对接方式', width: 100, filter: "projectDockingType" }
                        ]
                    },
                    {
                        label:'数据对接情况',align: 'center',prop: 'b',
                        children: [
                            { prop: 'status', label: '系统状态', width: 100, filter: "projectStatus" },
                            { prop: 'technicalDirector', label: '对接负责人', width: 110 },
                            { prop: 'dataSourceCount',label: '数据源',  width: 80, className: 'cell-bg-primary-5' },
                            { prop: 'storeLayerCount', label: '数据表数量',  width: 100 },
                            { prop: 'projectDockingStatus', label: '对接状态', width: 100, filter: "projectDockingStatus" },
                            { prop: 'projectDockingTime', label: '对接日期', width: 140, filter: ['date', 'YYYY-M-D'] },
                            { prop: 'dataLastUpdateTime', label: '数据更新日期', width: 150 }
                        ]
                    },
                    {
                        label:'合同及付款信息',align: 'center',prop: 'c',
                        children: [
                            {
                                prop: '', label: '合同名称', width: 150,isHtml: true,align:'left',
                                fn(r) {
                                    if(!r.contractList) return
                                    let htmlStr = ''
                                    _.forEach(r.contractList, (o,id)=> {
                                        htmlStr += '<div>'+'<span>'+ (id+1)+ '.' + '</span>' + o.name + '</div>'
                                    })
                                    return htmlStr
                                }
                            },

显示效果如下