更新记录

1.0.0（2023-03-13） 下载此版本

支持合并单元格

平台兼容性

表格-基于CSSgrid布局实现合并单元格

使用示例

<template>
    <gridTable align="center" :tableData="tableData"></gridTable>
</template>

<script>
    import gridTable from '@/components/grid-table/index.vue';
    export default {
        components:{
            gridTable
        }
        ...
    }   
</script>

参数 isFlex:是否水平垂直居中

isFlex:Boolean

参数 align:表格内容对齐方式

align:'left|right|center'

参数 tableData:表格数据

tableData:Object
thead:表头
tbody:表体,每个单元格都是一个object，为了对应grid布局，相当于每个部分都是独立的，方便合并单元格

单元格参数说明

color:字体颜色
bgColor:背景色
align:对齐方式
gridArea是传递给组件grid布局中的css属性-grid-area(可参考https://www.w3school.com.cn/cssref/pr_grid-area.asp)
简单来说,gridArea:'起始行/起始列/结束行(所占行数)/结束列(所占列数)'

数据示例

特别说明：合并单元格有两种方式。
1.需要合并的单元格，直至最后一次出现时，之前对应单元格数据都应为空
例如：
    /* 第一行 */
    序号：{value:'1',color:'red',bgColor:'#ace',align:'left'},
    姓名：{value:'张牧之'},
    年龄：{value:'25'},
    专业：{value:''}//此时为空
    /* 第二行 */
    序号：{value:'2'},
    姓名：{value:'张牧之'},
    年龄：{value:'25'},
    专业：{value:'打篮球,三分贼强~',gridArea:'2/4/4/4'}//此时增加属性gridArea，并且设置四个属性
    含义为：从第二行（表头是第一行）第四列开始，至第四行（占两行），第四列结束

2.需要合并的单元格gridArea属性值传对应参数，之前传auto即可
例如：
    /* 第一行 */
    序号：{value:'1',color:'red',bgColor:'#ace',align:'left'},
    姓名：{value:'张牧之'},
    年龄：{value:'25'},
    专业：{value:'打篮球,三分贼强~'，gridArea:'auto'}
    /* 第二行 */
    序号：{value:'2'},
    姓名：{value:'张牧之'},
    年龄：{value:'25'},
    专业：{value:'打篮球,三分贼强~',gridArea:'2/4/4/4'}//此时增加属性gridArea，并且设置四个属性
    含义为：从第二行（表头是第一行）第四列开始，至第四行（占两行），第四列结束

数据示例：
tableData:{
    thead:[
        {
            name:'序号'
        },{
            name:'姓名'
        },{
            name:'年龄'
        },{
            name:'专业'
        }
    ],
    tbody:[
        {value:'1',color:'red',bgColor:'#ace',align:'left'},
        {value:'张牧之'},
        {value:'25'},
        {value:''},
        {value:'2'},
        {value:'赵坤明'},
        {value:'33'},
        {value:'打篮球,三分贼强~',gridArea:'2/4/4/4'},
        {value:'3'},
        {value:'张牧之'},
        {value:'25'},
        {value:''},
        {value:'4'},
        {value:'赵坤明'},
        {value:'33'},
        {value:'踢足球，倒挂金钩！',gridArea:'4/4/6/4',isFlex:true},
    ]
}