【vxe-table】复杂表头动态渲染

最新推荐文章于 2024-06-28 13:45:26 发布
最新推荐文章于 2024-06-28 13:45:26 发布
阅读量3.1k 收藏 4
点赞数 3
分类专栏： vue 文章标签： table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YhWyl527/article/details/116304352
版权

引入插件自己百度查
直接上代码

<vxe-table border :data='tableData' align="center">
        <vxe-table-column title="姓名" field='candidateName' width="80" fixed="left"></vxe-table-column>
        <template>
          <vxe-table-colgroup  v-for='i in xiangmuList' :title="i.title">
            <vxe-table-column v-for="item in i.children" :title="item.title" :field='item.title'></vxe-table-column>
          </vxe-table-colgroup>
        </template>
        
      </vxe-table>

数据结构

[
{
    "1": "-",
    "4": "100",
    "11": "100",
    "12": "100",
    "arr": [
        {
            "infoId": 1,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0102",
            "candidateName": "张小妹",
            "indicatorId": 7,
            "indicatorName": "4",
            "score": 100,
            "planId": 10,
            "planName": "计划10",
            "projectId": 11,
            "projectName": "测试10",
            "valueScope": "",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "infoId": 2,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0102",
            "candidateName": "张小妹",
            "indicatorId": 8,
            "indicatorName": "11",
            "score": 100,
            "planId": 10,
            "planName": "计划10",
            "projectId": 11,
            "projectName": "测试10",
            "valueScope": "",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "infoId": 3,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0102",
            "candidateName": "张小妹",
            "indicatorId": 9,
            "indicatorName": "12",
            "score": 100,
            "planId": 10,
            "planName": "计划10",
            "projectId": 11,
            "projectName": "测试10",
            "valueScope": "",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "projectId": 2,
            "projectName": "测试打分制04-21-14:50",
            "indicatorId": 1,
            "indicatorName": "测试指标1",
            "ruleList": [
                {
                    "id": 5,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 100,
                    "endValue": 90,
                    "markRatio": 10,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 6,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 89,
                    "endValue": 79,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 7,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 78,
                    "endValue": 60,
                    "markRatio": 30,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 8,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 59,
                    "endValue": 0,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        },
        {
            "projectId": 3,
            "projectName": "测试等级制2 0421-15:38",
            "indicatorId": 3,
            "indicatorName": "测试指标333",
            "ruleList": [
                {
                    "id": 15,
                    "projectId": 3,
                    "gradeName": "等级1",
                    "fixationValue": 100,
                    "gradeRatio": 10,
                    "beginValue": 50,
                    "endValue": 41,
                    "markRatio": 10,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 16,
                    "projectId": 3,
                    "gradeName": "等级2",
                    "fixationValue": 90,
                    "gradeRatio": 10,
                    "beginValue": 40,
                    "endValue": 31,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 17,
                    "projectId": 3,
                    "gradeName": "等级3",
                    "fixationValue": 80,
                    "gradeRatio": 20,
                    "beginValue": 30,
                    "endValue": 21,
                    "markRatio": 30,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 18,
                    "projectId": 3,
                    "gradeName": "等级4",
                    "fixationValue": 70,
                    "gradeRatio": 50,
                    "beginValue": 20,
                    "endValue": 11,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 19,
                    "projectId": 3,
                    "gradeName": "等级5",
                    "fixationValue": 60,
                    "gradeRatio": 10,
                    "beginValue": 10,
                    "endValue": 0,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        },
        {
            "projectId": 11,
            "projectName": "测试10",
            "indicatorId": 4,
            "indicatorName": "1",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        }
    ],
    "candidateByname": "0102",
    "candidateName": "张小妹",
    "planId": 10,
    "pID": [
        11,
        11,
        11
    ],
    "iID": [
        7,
        8,
        9
    ],
    "测试10": {
        "title": "测试10",
        "children": [
            {
                "title": "4",
                "zhibiaokey": "100"
            },
            {
                "title": "11",
                "zhibiaokey": "100"
            },
            {
                "title": "12",
                "zhibiaokey": "100"
            },
            {
                "title": "1",
                "zhibiaokey": "-"
            }
        ]
    },
    "测试打分制04-21-14:50": {
        "title": "测试打分制04-21-14:50",
        "children": [
            {
                "title": "测试指标1",
                "zhibiaokey": "-"
            }
        ]
    },
    "测试等级制2 0421-15:38": {
        "title": "测试等级制2 0421-15:38",
        "children": [
            {
                "title": "测试指标333",
                "zhibiaokey": "-"
            }
        ]
    },
    "测试指标1": "-",
    "测试指标333": "-",
    "_XID": "row_3"
},
{
    "1": "100",
    "4": "-",
    "11": "-",
    "12": "-",
    "arr": [
        {
            "infoId": 4,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0103",
            "candidateName": "董建军",
            "indicatorId": 1,
            "indicatorName": "测试指标1",
            "score": 20,
            "planId": 10,
            "planName": "计划10",
            "projectId": 2,
            "projectName": "测试打分制04-21-14:50",
            "valueScope": "1-100",
            "ruleList": [
                {
                    "id": 5,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 100,
                    "endValue": 90,
                    "markRatio": 10,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 6,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 89,
                    "endValue": 79,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 7,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 78,
                    "endValue": 60,
                    "markRatio": 30,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 8,
                    "projectId": 2,
                    "gradeName": null,
                    "fixationValue": null,
                    "gradeRatio": null,
                    "beginValue": 59,
                    "endValue": 0,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "infoId": 5,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0103",
            "candidateName": "董建军",
            "indicatorId": 3,
            "indicatorName": "测试指标333",
            "score": 90,
            "planId": 10,
            "planName": "计划10",
            "projectId": 3,
            "projectName": "测试等级制2 0421-15:38",
            "valueScope": "",
            "ruleList": [
                {
                    "id": 15,
                    "projectId": 3,
                    "gradeName": "等级1",
                    "fixationValue": 100,
                    "gradeRatio": 10,
                    "beginValue": 50,
                    "endValue": 41,
                    "markRatio": 10,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 16,
                    "projectId": 3,
                    "gradeName": "等级2",
                    "fixationValue": 90,
                    "gradeRatio": 10,
                    "beginValue": 40,
                    "endValue": 31,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 17,
                    "projectId": 3,
                    "gradeName": "等级3",
                    "fixationValue": 80,
                    "gradeRatio": 20,
                    "beginValue": 30,
                    "endValue": 21,
                    "markRatio": 30,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 18,
                    "projectId": 3,
                    "gradeName": "等级4",
                    "fixationValue": 70,
                    "gradeRatio": 50,
                    "beginValue": 20,
                    "endValue": 11,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                },
                {
                    "id": 19,
                    "projectId": 3,
                    "gradeName": "等级5",
                    "fixationValue": 60,
                    "gradeRatio": 10,
                    "beginValue": 10,
                    "endValue": 0,
                    "markRatio": 20,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "infoId": 6,
            "inspectionByname": "0101",
            "inspectionName": "焦红浩",
            "candidateByname": "0103",
            "candidateName": "董建军",
            "indicatorId": 4,
            "indicatorName": "1",
            "score": 100,
            "planId": 10,
            "planName": "计划10",
            "projectId": 11,
            "projectName": "测试10",
            "valueScope": "",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ]
        },
        {
            "projectId": 11,
            "projectName": "测试10",
            "indicatorId": 7,
            "indicatorName": "4",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        },
        {
            "projectId": 11,
            "projectName": "测试10",
            "indicatorId": 8,
            "indicatorName": "11",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        },
        {
            "projectId": 11,
            "projectName": "测试10",
            "indicatorId": 9,
            "indicatorName": "12",
            "ruleList": [
                {
                    "id": 30,
                    "projectId": 11,
                    "gradeName": "1",
                    "fixationValue": 100,
                    "gradeRatio": null,
                    "beginValue": null,
                    "endValue": null,
                    "markRatio": null,
                    "deleteTime": null,
                    "valueScope": null
                }
            ],
            "score": "-"
        }
    ],
    "candidateByname": "0103",
    "candidateName": "董建军",
    "planId": 10,
    "pID": [
        2,
        3,
        11
    ],
    "iID": [
        1,
        3,
        4
    ],
    "测试10": {
        "title": "测试10",
        "children": [
            {
                "title": "1",
                "zhibiaokey": "100"
            },
            {
                "title": "4",
                "zhibiaokey": "-"
            },
            {
                "title": "11",
                "zhibiaokey": "-"
            },
            {
                "title": "12",
                "zhibiaokey": "-"
            }
        ]
    },
    "测试打分制04-21-14:50": {
        "title": "测试打分制04-21-14:50",
        "children": [
            {
                "title": "测试指标1",
                "zhibiaokey": "20"
            }
        ]
    },
    "测试等级制2 0421-15:38": {
        "title": "测试等级制2 0421-15:38",
        "children": [
            {
                "title": "测试指标333",
                "zhibiaokey": "90"
            }
        ]
    },
    "测试指标1": "20",
    "测试指标333": "90",
    "_XID": "row_4"
}

]

渲染部分的xiangmulist

[
{
    "title": "测试10",
    "children": [
        {
            "title": "4",
            "zhibiaokey": "100"
        },
        {
            "title": "11",
            "zhibiaokey": "100"
        },
        {
            "title": "12",
            "zhibiaokey": "100"
        },
        {
            "title": "1",
            "zhibiaokey": "-"
        }
    ]
},
{
    "title": "测试打分制04-21-14:50",
    "children": [
        {
            "title": "测试指标1",
            "zhibiaokey": "-"
        }
    ]
},
{
    "title": "测试等级制2 0421-15:38",
    "children": [
        {
            "title": "测试指标333",
            "zhibiaokey": "-"
        }
    ]
}
]
Wyliss
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
动态修改vxe-table表头border
Only No.1
09-12 622
今天在开发公司的透视表的过程中，遇到很多坑特此记录一下，样式更改这一块除了通过header-cell-style等方法已经无法满足样式修改的问题，最终选择通过通过js操作dom实现样式的更改。2.vxe-table在vue中不支持直接document.getElementsByClassName获取元素，我们使用。1.主要注意在onMounted中调用方法，通过watch检测数据变化在nextick中进行操作。来访问 VXE-Table 的根元素。
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
VUE之Vxe-table动态生成多级表头
HanXiaoXi_yeal的博客
11-11 2606
需求：1.第一列为正常列；2.第二列开始为动态生成列（根据接口返回数据生成）；3.最后一列为编辑列。
vxe-vxeTable使用vxe-colgroup分组合并表头，基础上合并
最新发布
2301_76671906的博客
06-28 401
vxeTable使用vxe-colgroup分组合并表头，基础上合并
vxe-table中动态渲染数据和多级表头的方法
xtcgjk的博客
02-25 1853
本文主要写了一个在vue2中，如何使用vxe-table组件自身携带的方法动态渲染表头与表体数据的简单案例
Vue使用Vxe-table组件,动态设置table表头过滤信息:filters
ShA_QimA的博客
06-01 3454
1: 加工完数据之后, 代码里面找到该子段的filters并赋值. 可能存在问题, 根据索引取字段不太靠谱,后面如果页面字段调整也需要跟着调整。2: 将列v-if设置成数组的长度. 问题: 如果数据数据为空会导致改字段不显示 哈哈.通常情况下,表头的这些过滤备选信息我们是直接在页面里面写死的.
vue 封装table的多级表头的实现
ivan_jq的博客
10-20 3271
开发中总是会遇到各种UI设计的图表，最近也一直“沉浸”在负责的两个专门做数据可视化的项目中，其中有个表格很好玩，效果如下图：（也不知道会不会压缩） 本项目主要使用VUE、Echarts、Element UI，来吧，直接开始了。 第一步：咱们需要重新封装table组件。 <el-table :data="tableData"> <el-table-column v-for="(item, index) of tableColumns" :key="index"
vxe-tablevue表格解决方案 v2.10.10
01-12
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
vxe-table-v2.9.24_表格组件_Table_
09-28
8. **表单渲染**：vxe-table可以与Vue的表单组件配合，实现动态渲染表单，根据后台返回的字段结构自动生成表单，提高了开发效率。 9. **数据分页**：为了便于处理大量数据，vxe-table内置了分页功能，用户可以轻松...
vxe-table vue表格解决方案 v4.5.20.zip
03-27
4. **虚拟滚动**：针对大数据量的场景，vxe-table采用虚拟滚动技术，只渲染可视区域的行，极大地提高了性能。 5. **国际化支持**：内置多语言支持，方便不同地区用户使用。 6. **扩展性强**：vxe-table提供了一...
vxe-table vue table 表格组件功能
01-21
查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •...
vue中封装动态生成vxe-table的方法组件
m0_72993813的博客
12-01 771
通过以上步骤，您就可以动态生成 VXE-Table 组件，并将数据渲染到表格中。请根据您的实际需求进行调整和扩展。在上述示例中，我们首先导入 VXE-Table 的样式文件和所需的组件。然后，我们创建了一个名为。的方法，该方法接受一个数据数组作为参数。在方法内部，我们使用 Vue 3 的。钩子函数中，我们根据数据的第一项动态生成列配置，并将其赋值给。在上述示例中，我们首先导入了之前创建的。，其中包含了要显示在表格中的数据。然后，我们定义了一个模板，其中使用了。然后，我们定义了一个数据数组。
vxe-table动态渲染列，刷新列宽
weixin_44705310的博客
01-14 2021
使用vxe-table渲染表格，支持列选和拖拽列宽，并可按用户记忆，支持一键恢复默认列选、列宽，因此使用v-for动态渲染列。当点击一键恢复的时候，需要恢复成默认的列选及列宽。利用vue触发重新渲染的机制，给表格绑定key为随机生成的字符串，当点击一键恢复时，重新生成一段新的随机字符串赋值给表格绑定的key，这样就会触发表格的重新渲染。使用vxe-table，用v-for渲染列，修改列宽调用vxe提供的refreshColumn和recalculate方法都不生效。表格列宽没有重新渲染。
【猛地学】vxe-table（支持大数据量的可编辑vue表格插件）
fangyuan__的博客
08-10 6199
vxe-table（支持大数据量的可编辑vue表格插件）
vxe自定义表头设置+前端本地数据存储
weixin_47353884的博客
02-28 2748
是所有列的数据 既用于渲染动态表格 也用来渲染操作栏type : 'seq' , title : '序号' } , {field : 'cnName' , title : '中文名称' , slots : {field : 'enName' , title : '英文名称' , slots : {field : 'enShortName' , title : '英文简称' , slots : {field : 'positionLevelStr' , title : '职位级别' } , {
Vue el-table动态表头与数据
m0_61315972的博客
07-05 6332
在Vue中，el-table是element-ui提供的强大表格组件，可以用于展示静态和动态表格数据。动态表头是一个常见的需求，特别是在管理系统中，用户可能根据不同的业务场景需要显示不同的表头信息。本文将详细介绍如何在Vue中实现动态表头与数据展示，并使用el-table来实现这一功能。通过以上步骤，我们成功在Vue中实现了动态表头与数据展示。使用DynamicTable组件，我们可以根据业务需求轻松配置表头，实现动态展示数据。这个功能在管理后台系统中尤其实用，帮助用户根据不同的业务场景查看和分析数据。
vxe-table 表格组件简单使用
Black_Straight的博客
11-05 2323
vxe-table 表格组件简单使用
vxe-table 筛选渲染filter-render 自定义组件
wanghanlu_的博客
05-26 4197
3.1在main.js文字中导入vxetableRenderer.js文件。1.创建vxetableRenderer.js文件。2.创建filterModal.vue文件。3.2在你的列配置中使用。
【vxe自定义列+localStorage】
weixin_47099261的博客
12-07 2681
vxe自定义列+localStoragevxe-toolar-api链接成品展示html代码js代码happy ending！ 我接触的后台管理项目中用到了vxe，产品给了个需求：1.让客户自己选择要展示的列，2.打开页面默认展示或隐藏某些列，3.禁用某些列(不给客户选)。然后我就找呀找翻呀翻文档，拼拼凑凑算是做出来了，希望我此次的经验也能帮助到大家。ps：有问题可以指出来噢，我都会悉心听的呀~ vxe-toolar-api链接 vxe-toolar-api文档链接（点点点，比我说的清楚） 成品展示 先把
el-table动态渲染表头
09-20
el-table动态渲染表头可以通过使用v-for指令遍历一个数组，并将数组中每个对象的属性作为表格的列名来渲染表头。首先，在data选项中定义一个tableColumns数组，用于存储表格列的配置信息。然后，在组件创建时，可以利用created钩子函数来动态生成tableColumns数组。具体操作是，判断tableData数组是否为空，如果不为空，则利用Object.keys方法获取tableData中第一个对象的属性作为表头列的属性名，然后使用map方法将属性名转换为表头列的配置对象，配置对象的key属性和label属性都设置为属性名。最后，将生成的配置对象添加到tableColumns数组中，即可完成动态渲染表头的操作。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值