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

最新推荐文章于 2024-08-07 17:30:11 发布
最新推荐文章于 2024-08-07 17:30:11 发布
阅读量3.2k 收藏 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
关注
专栏目录
动态修改vxe-table表头border
Only No.1
09-12 726
今天在开发公司的透视表的过程中，遇到很多坑特此记录一下，样式更改这一块除了通过header-cell-style等方法已经无法满足样式修改的问题，最终选择通过通过js操作dom实现样式的更改。2.vxe-table在vue中不支持直接document.getElementsByClassName获取元素，我们使用。1.主要注意在onMounted中调用方法，通过watch检测数据变化在nextick中进行操作。来访问 VXE-Table 的根元素。
vxe-table vue table 表格组件功能
10-16
在样式定制方面，vxe-table提供列宽拖动、流体高度以及固定表头和列等选项，使得表格在不同设备和屏幕尺寸下均有良好的显示效果。固定表头可以保证在滚动时表头仍然可见，而固定列则允许在横向滚动时固定某些列，这...
vxe-table vue表格解决方案 v4.5.20.zip
03-27
vxe-table vue表格解决方案 v4.5.20.zip
vxe-table多级表头，数据相同合并单元格
最新发布
qq_40905132的博客
08-07 245
以日期为基准进行单元格合并。
VUE之Vxe-table动态生成多级表头
HanXiaoXi_yeal的博客
11-11 2793
需求：1.第一列为正常列；2.第二列开始为动态生成列（根据接口返回数据生成）；3.最后一列为编辑列。
vxe-table中动态渲染数据和多级表头的方法
xtcgjk的博客
02-25 2207
本文主要写了一个在vue2中，如何使用vxe-table组件自身携带的方法动态渲染表头与表体数据的简单案例
Vxetable 递归多级表头
qq_43225508的博客
05-23 628
Vxetable 递归多级表头
vxe-table 实现复杂的表格功能。
是秃子总会发光
07-11 6213
vxe-table + ant design 实现表格的增删改、排序、筛选、点击单元格弹对话框等功能。
vxe-table-v2.9.24_表格组件_Table_
09-28
8. **表单渲染**：vxe-table可以与Vue的表单组件配合，实现动态渲染表单，根据后台返回的字段结构自动生成表单，提高了开发效率。 9. **数据分页**：为了便于处理大量数据，vxe-table内置了分页功能，用户可以轻松...
【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx
12-29
首先，`vxe-table`是一个功能强大的表格组件，相比Element UI的`el-table`，它提供了更多高级特性，如动态渲染、高性能以及丰富的编辑功能。在尝试优化`el-table`无果后，转向`vxe-table`是明智的选择。 ### 1. ...
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-tablevue表格解决方案 v2.10.10
01-12
为您提供vxe-tablevue表格解决方案下载，vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等...设计理念：面向现代浏览器，高效的简洁 API 设计模块化表格、按需加载、插件化扩展为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能功能：Basic table （基础表格）Grid
动态操作表格并进行列渲染(改进)
05-25
NULL 博文链接：https://wv1124.iteye.com/blog/473860
【vxe-table】vxe-table渲染表头的两种方式
bbt953的博客
09-18 1755
vxe-table渲染表头的两种方式
Vue使用Vxe-table组件,动态设置table表头过滤信息:filters
ShA_QimA的博客
06-01 3736
1: 加工完数据之后, 代码里面找到该子段的filters并赋值. 可能存在问题, 根据索引取字段不太靠谱,后面如果页面字段调整也需要跟着调整。2: 将列v-if设置成数组的长度. 问题: 如果数据数据为空会导致改字段不显示 哈哈.通常情况下,表头的这些过滤备选信息我们是直接在页面里面写死的.
vxe-table——实现table 动态显示 +冻结列等功能——技能提升
yehaocheng520的博客
07-19 3457
vex-table——实现table 动态显示+冻结 列等功能——技能提升
vue 封装table的多级表头的实现
ivan_jq的博客
10-20 3337
开发中总是会遇到各种UI设计的图表，最近也一直“沉浸”在负责的两个专门做数据可视化的项目中，其中有个表格很好玩，效果如下图：（也不知道会不会压缩） 本项目主要使用VUE、Echarts、Element UI，来吧，直接开始了。 第一步：咱们需要重新封装table组件。 <el-table :data="tableData"> <el-table-column v-for="(item, index) of tableColumns" :key="index"
vue中封装动态生成vxe-table的方法组件
m0_72993813的博客
12-01 819
通过以上步骤，您就可以动态生成 VXE-Table 组件，并将数据渲染到表格中。请根据您的实际需求进行调整和扩展。在上述示例中，我们首先导入 VXE-Table 的样式文件和所需的组件。然后，我们创建了一个名为。的方法，该方法接受一个数据数组作为参数。在方法内部，我们使用 Vue 3 的。钩子函数中，我们根据数据的第一项动态生成列配置，并将其赋值给。在上述示例中，我们首先导入了之前创建的。，其中包含了要显示在表格中的数据。然后，我们定义了一个模板，其中使用了。然后，我们定义了一个数据数组。
vxe-table vxe-column实现多级表头
12-27
vxe-table和vxe-column是基于Vue.js的表格组件，可以实现多级表头。下面是一个示例代码，演示了如何使用vxe-table和vxe-column实现多级表头： ```vue <template> <vxe-table :data="tableData" border show-header> <vxe-column type="index" title="序号"></vxe-column> <vxe-column title="基本信息"> <vxe-column title="姓名" field="name"></vxe-column> <vxe-column title="年龄" field="age"></vxe-column> </vxe-column> <vxe-column title="联系方式"> <vxe-column title="电话" field="phone"></vxe-column> <vxe-column title="邮箱" field="email"></vxe-column> </vxe-column> <vxe-column title="操作"> <vxe-column title="编辑" :render-header="renderEditHeader"></vxe-column> <vxe-column title="删除" :render-header="renderDeleteHeader"></vxe-column> </vxe-column> </vxe-table> </template> <script> import 'vxe-table/lib/style.css'; import { VXETable } from 'vxe-table'; export default { data() { return { tableData: [ { name: '张三', age: 20, phone: '123456789', email: 'zhangsan@example.com' }, { name: '李四', age: 25, phone: '987654321', email: 'lisi@example.com' }, ], }; }, methods: { renderEditHeader({ column }) { return <span>{column.title}（编辑）</span>; }, renderDeleteHeader({ column }) { return <span>{column.title}（删除）</span>; }, }, mounted() { VXETable.setup({ size: 'mini', }); }, }; </script> ``` 在上面的代码中，我们使用了vxe-table和vxe-column组件来创建一个表格。通过嵌套vxe-column组件，我们可以实现多级表头。每个vxe-column组件都代表一个表头列，可以设置title属性来定义列的标题，field属性来指定列对应的数据字段。 在示例中，我们创建了一个基本的表格，包含了基本信息和联系方式两个多级表头。每个表头列都可以自定义渲染，通过render-header属性来指定渲染函数。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值