Skip to content

支持横向树形表头和纵向树形表头的表格。Tables that support both horizontal and vertical tree headers

Notifications You must be signed in to change notification settings

zhjing1019/moreTreeTable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

moreTreeTable是一个具有横向表头和纵向表头的表头,切横向表头和纵向表头均支持树形结构数据,形成树形表头的表格

MoreTreeTable is a table header with a horizontal and a vertical header that supports tree structure data to form a table with a tree header

moreTreeTabel支持多向表头,并且支持横向和纵向的树形结构的表头

moreTreeTabel纵向表头表格

moreTreeTabel横向表头表格

启动该项目

npm run serve

下载该组件

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对应

colData的值同上

tableValue的值

    //纵向表头数据
    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"
        },
    ],

横向表头表格

    <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"
        },
    ],

如果有任何问题可以关注我的个人技术公众号javascript艺术,或者添加我微信反馈 image image

About

支持横向树形表头和纵向树形表头的表格。Tables that support both horizontal and vertical tree headers

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published