前端合并单元格插件

前言

在后台管理系统中，经常有合并单元格的需求。

所以为了提高后续的开发效率，就开发了一款插件插件：@jinming6/merge-helper

合并 “ 行 ”

    
    
    Document
    


    

        
            
            
            
            
        
    
    
    
    
    
    
        const { createApp, ref, onMounted } = Vue;
        const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']
        const { SORT_NO_KEY } = constants
        const app = createApp({
            setup() {
                const tableData = ref([])
                const getTableData = () => {
                    const data = [
                        {
                            name: '张三',
                            age: 18,
                            provinces: '山东省'
                        },
                        {
                            name: '张三',
                            age: 18,
                            provinces: '山东省'
                        },
                        {
                            name: '李四',
                            age: 18,
                            provinces: '山东省'
                        },
                        {
                            name: '王五',
                            age: 20,
                            provinces: '江苏省'
                        },
                    ]
                    const options = {
                        mode: Mode.Row,
                        dataSource: data,
                        mergeFields: [{
                            field: 'name',
                            callback(curItem, nextItem) {
                                return curItem.name === nextItem.name
                            }
                        }, 'age', 'provinces'],
                        genSort: true,
                    }
                    const mergedData = getMergedData(options)
                    tableData.value = mergedData;
                    console.log(mergedData)
                }
                const spanMethod = ({ row, columnIndex }) => {
                    if (columnIndex 
                        return getFieldSpan(row, 'name');
                    }
                    if (columnIndex === 2) {
                        return getFieldSpan(row, 'age');
                    }
                    if (columnIndex === 3) {
                        return getFieldSpan(row, 'provinces');
                    }
                    return {
                        rowspan: 1,
                        colspan: 1,
                    };
                }
                onMounted(() = {
                    getTableData()
                })
                return {
                    tableData,
                    spanMethod,
                    SORT_NO_KEY
                }
            }
        })
        app.use(ElementPlus)
        app.mount('#app')
    

合并 “ 列 ”

    
    
    Document
    


    

        
            
            
        
    
    
    
    
    
    
        const { createApp, ref, onMounted } = Vue;
        const { getMergedData, Mode, getFieldSpan, constants } = window['@jinming6/mergeHelper']
        const { SORT_NO_KEY } = constants
        const app = createApp({
            setup() {
                const tableData = ref([])
                const columns = [
                    {
                        label: '姓名',
                        prop: 'name'
                    },
                    {
                        label: '年龄',
                        prop: 'age'
                    },
                    {
                        label: '省份',
                        prop: 'provinces'
                    },
                    {
                        label: '市',
                        prop: 'city'
                    },
                    {
                        label: '区/县',
                        prop: 'county'
                    },
                ]
                const getTableData = () => {
                    const data = [
                        {
                            name: '张三',
                            age: 18,
                            provinces: '山东省',
                            city: '青岛市',
                            county: '崂山区'
                        },
                        {
                            name: '李四',
                            age: 20,
                            provinces: '北京市',
                            city: '北京市',
                            county: '北京市'
                        },
                        {
                            name: '王五',
                            age: 21,
                            provinces: '江苏省',
                            city: '南京市',
                            county: '雨花台区'
                        },
                        {
                            name: '马六',
                            age: 22,
                            provinces: '上海市',
                            city: '上海市',
                            county: '上海市'
                        },
                    ]
                    const options = {
                        mode: Mode.Col,
                        dataSource: data,
                        mergeFields: columns.map((item) => item.prop),
                        columns
                    }
                    const mergedData = getMergedData(options)
                    tableData.value = mergedData;
                }
                const spanMethod = ({ row, column }) => getFieldSpan(row, column.property)
                onMounted(() => {
                    getTableData()
                })
                return {
                    columns,
                    tableData,
                    spanMethod,
                    SORT_NO_KEY
                }
            }
        })
        app.use(ElementPlus)
        app.mount('#app')