@blueking/vxe-table/es/table/src/group.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

import { defineComponent, h, onUnmounted, provide, inject, ref, onMounted, createCommentVNode } from 'vue';
import { columnProps } from './column';
import { watchColumn, assembleColumn, destroyColumn } from './util';
import Cell from './cell';
export default defineComponent({
    name: 'VxeColgroup',
    props: columnProps,
    setup(props, { slots }) {
        const refElem = ref();
        const $xeTable = inject('$xeTable', null);
        const $xeParentColgroup = inject('$xeColgroup', null);
        if (!$xeTable) {
            return () => createCommentVNode();
        }
        const columnConfig = Cell.createColumn($xeTable, props);
        const columnSlots = {};
        if (slots.header) {
            columnSlots.header = slots.header;
        }
        columnConfig.slots = columnSlots;
        columnConfig.children = [];
        watchColumn($xeTable, props, columnConfig);
        onMounted(() => {
            const elem = refElem.value;
            if (elem) {
                assembleColumn($xeTable, elem, columnConfig, $xeParentColgroup);
            }
        });
        onUnmounted(() => {
            destroyColumn($xeTable, columnConfig);
        });
        const renderVN = () => {
            return h('div', {
                ref: refElem
            }, slots.default ? slots.default() : []);
        };
        const $xeColgroup = { columnConfig };
        provide('$xeColgroup', $xeColgroup);
        provide('$xeGrid', null);
        return renderVN;
    }
});