vue有纵向和横向表头表格

github源码地址：https://github.com/zhjing1019/moreTreeTable

使用方法

一、下载该组件

npm install more-tree-table

  在main.js里引用该组件

import moreTreeTable from "more-tree-table"

Vue.use(moreTreeTable);

二、多表头表格

 <more-tree-table :colData="colHead" :rowData="rowHead" :tableValue="tableValue1"></more-tree-table>

colData: 为Array，是指竖向表头的数据，可以是树形结构的表头 rowData: 为Array，是指横向表头的数据 tableValue: 为Object，是指表格的数据，tableValue中的key为 ’横向表头的id__纵向表头的id‘ colData的值和rowData的值

rowData: [
        {
            id: "1111",
            name: "测试1",
            children: [
                {
                    id: "1111-1",
                    name: "测试1-1",
                    children: [
                        {
                            id: "1111-1-2",
                            name: "测试1-1-2",
                        },
                        {
                            id: "1111-1-3",
                            name: "测试1-1-4",
                        },
                    ]
                },
                {
                    id: "1111-2",
                    name: "测试1-2",
                    children: [
                        {
                            id: "1111-2-2",
                            name: "测试1-2-2",
                        },
                        {
                            id: "1111-2-3",
                            name: "测试1-2-4",
                        },
                    ]
                },
                {
                    id: "1111-3",
                    name: "测试1-3",
                    children: [
                        {
                            id: "1111-3-2",
                            name: "测试1-3-2",
                        },
                        {
                            id: "1111-3-3",
                            name: "测试1-3-4",
                        },
                    ]
                },
                {
                    id: "1111-4",
                    name: "测试1-4",
                },
                
            ]
        },
        {
            id: "2222",
            name: "测试1",
            children: [
                {
                    id: "2222-1",
                    name: "测试1-1",
                    children: [
                        {
                            id: "2222-1-2",
                            name: "测试1-1-2",
                        },
                        {
                            id: "2222-1-3",
                            name: "测试1-1-4",
                        },
                    ]
                },
                {
                    id: "2222-2",
                    name: "测试1-2",
                    children: [
                        {
                            id: "2222-2-2",
                            name: "测试1-2-2",
                        },
                        {
                            id: "2222-2-3",
                            name: "测试1-2-4",
                        },
                    ]
                },
                {
                    id: "2222-3",
                    name: "测试1-3",
                    children: [
                        {
                            id: "2222-3-2",
                            name: "测试1-3-2",
                        },
                        {
                            id: "2222-3-3",
                            name: "测试1-3-4",
                        },
                    ]
                },
                {
                    id: "2222-4",
                    name: "测试1-4",
                },
                
            ]
        },
    ],
    colData: [
        {
            id: "1111",
            name: "测试1",
            children: [
                {
                    id: "1111-1",
                    name: "测试1-1",
                    children: [
                        {
                            id: "1111-1-2",
                            name: "测试1-1-2",
                        },
                        {
                            id: "1111-1-3",
                            name: "测试1-1-4",
                        },
                    ]
                },
                {
                    id: "1111-2",
                    name: "测试1-2",
                    children: [
                        {
                            id: "1111-2-2",
                            name: "测试1-2-2",
                        },
                        {
                            id: "1111-2-3",
                            name: "测试1-2-4",
                        },
                    ]
                },
                {
                    id: "1111-3",
                    name: "测试1-3",
                    children: [
                        {
                            id: "1111-3-2",
                            name: "测试1-3-2",
                        },
                        {
                            id: "1111-3-3",
                            name: "测试1-3-4",
                        },
                    ]
                },
                {
                    id: "1111-4",
                    name: "测试1-4",
                },
                
            ]
        },
        {
            id: "2222",
            name: "测试1",
            children: [
                {
                    id: "2222-1",
                    name: "测试1-1",
                    children: [
                        {
                            id: "2222-1-2",
                            name: "测试1-1-2",
                        },
                        {
                            id: "2222-1-3",
                            name: "测试1-1-4",
                        },
                    ]
                },
                {
                    id: "2222-2",
                    name: "测试1-2",
                    children: [
                        {
                            id: "2222-2-2",
                            name: "测试1-2-2",
                        },
                        {
                            id: "2222-2-3",
                            name: "测试1-2-4",
                            children: [
                                {
                                    id: "2222-2-3-1",
                                    name: "测试1-2-2",
                                },
                                {
                                    id: "2222-2-3-2",
                                    name: "测试1-2-2",
                                },
                            ]
                        },
                    ]
                },
                {
                    id: "2222-3",
                    name: "测试1-3",
                    children: [
                        {
                            id: "2222-3-2",
                            name: "测试1-3-2",
                        },
                        {
                            id: "2222-3-3",
                            name: "测试1-3-4",
                        },
                    ]
                },
                {
                    id: "2222-4",
                    name: "测试1-4",
                },
                
            ]
        },
    ],

tableValue的值

//多项表头的数据
    tableValue1: {
        '1111-1-2__1111-1-2': '测试数据1',
        '1111-1-3__1111-1-3': '测试数据2',
        '1111-2-2__1111-2-2': '测试数据3',
        '1111-2-3__1111-2-3': '测试数据4',
        '1111-3-2__1111-3-2': '测试数据5',
        '2222-3-3__2222-3-3': "测试数据6",
        '2222-4__2222-4': '测试数据7'
    },

三、纵向表头的表格

 <more-tree-table :colData="colHead" :tableValue="tableValue2"></more-tree-table>

colData: 为Array，是指竖向表头的数据，可以是树形结构的表头 

tableValue: 为Array，数组的每一项为对象，对象中的key和纵向的id对应 

    //纵向表头数据
    tableValue2: [
        {
            '1111-1-2': "1",
            '1111-1-3': "2",
            '1111-2-2': "3",
            '1111-2-3': "4",
            '1111-3-2': "5",
            '2222-3-3': "6",
            '2222-4': "7"
        },
    ],

colData的值同上

四、横向表头的表格

<more-tree-table :rowData="rowHead" :tableValue="tableValue2"></more-tree-table>

rowData: 为Array，是指横向向表头的数据，可以是树形结构的表头 tableValue: 为Array，数组的每一项为对象，对象中的key和横向的id对应

rowData的值同上

tableValue的值

 //横向表头数据
    tableValue3: [
        {
            '1111-1-2': "1",
            '1111-1-3': "2",
            '1111-2-2': "3",
            '1111-2-3': "4",
            '1111-3-2': "5",
            '2222-3-3': "6",
            '2222-4': "7"
        },
    ],

 

欢迎关注我的个人技术公众号