SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
        return {
            expandRowKeys: null
        }
    },
    mounted() {
        setTimeout(() => {
            this.loadData();
        })
    },
    methods: {
        loadData() {
            const data = [];
            for (let i = 0; i < 10; i++) {
                data.push({
                    _rowid: i,
                    name: `NAME-${i + 1}`,
                    sex: ['男', '女'][Math.floor(Math.random() * 2)],
                    age: Math.floor(Math.random() * 20) + 20
                })
            }
            let groupData = [];
            const groupMap = new Map();
            data.forEach((item,index) => {
                let group = groupMap.get(item.sex);
                let groupId;
                if (group == null) {
                    groupId = `group_${index}`
                    group = {
                        _rowid: groupId,
                        name: item.sex,
                        isGroup: true,
                        $parentId:null,
                    };
                    groupData.push(group);
                    groupMap.set(item.sex,group);
                }else{
                    groupId = group._rowid;
                }
                item.$parentId = groupId;
            });
            groupData = [...groupData, ...data];
            this.$nextTick(() => {
                const $table = this.$refs.tableRef;
                if(!$table){
                    return;
                }
                $table.loadData(groupData).then(()=>{
                    $table.setAllTreeExpand(true)
                });
            })
        }
    }
};
var app = new Vue(Main).$mount('#app')
<script src="https://unpkg.com/vue@2.7.16">

</script>
<script src="https://unpkg.com/xe-utils">

</script>
<script src="https://unpkg.com/vxe-pc-ui@3.5.24">

</script>
<script src="https://unpkg.com/vxe-table@3.15.4">

</script>

<div id="app">
	<template>
		<div>
			<p>Table 演示 scroll-x GT: 2</p>
			<vxe-table 
                border 
                height="500px" 
                auto-resize
                keep-source
                show-header
                :show-overflow="false"
                show-overflow="tooltip"
                show-header-overflow="tooltip"
                show-footer-overflow="tooltip"
                :cell-config="{
                    height:34
                }" 
                size="mini" 
                ref="tableRef" 
                :column-config="{
                    useKey: true,
                    resizable: true,
                }" 
                :row-config="{
                    useKey: true,
                    keyField: '_rowid',
                    isCurrent: true,
                    isHover: true
                }"
                :tree-config="{
                    expandRowKeys:expandRowKeys,
                    transform: true,
                    indent: 10,
                    rowField: '_rowid',
                    parentField: '$parentId',
                    iconOpen: 'ri-arrow-down-s-line',
                    iconClose: 'ri-arrow-right-s-line',
                    iconLoaded: 'ri-loader-2-line',
                    reserve: true
                }"
                :row-config='{"useKey":true,"keyField":"id","isCurrent":true,"isHover":true}' 
                :virtual-x-config="{
                    enabled:true,
                    gt: 10,
                    oSize: 5
                }"
                :virtual-y-config="{
                    enabled: true,
                    gt: 30,
                    oSize: 5
                }">
				<vxe-table-column type="checkbox" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column type="seq" width="70" fixed="left"></vxe-table-column>
				<vxe-table-column field="name" title="Name" width="100" tree-node resizable></vxe-table-column>
				<vxe-table-column field="sex" title="Sex" width="400" resizable></vxe-table-column>
				<vxe-table-column field="age" title="Age" width="1000" resizable></vxe-table-column>
			</vxe-table>
		</div>
	</template>
</div>
@import url("https://unpkg.com/vxe-pc-ui@3.5.24/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.15.4/lib/style.css");
@import url("https://unpkg.com/remixicon@4.5.0/fonts/remixicon.css");

.vxe-tree--btn-wrapper {
    height: 16px !important;
    width: 16px !important;
}

.vxe-tree--btn-wrapper .vxe-tree--node-btn{
    line-height: normal;
    font-size: 16px;
}