SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data(vm) {
        return {
            gridOptions: {
                border: true,
                columns: [
                    { type: 'seq', width: 60 },
                    { field: 'name', title: 'Name' },
                    { field: 'sex', title: 'Sex' },
                    { field: 'date', title: 'Date' },
                    { field: 'address', title: 'Address' }
                ],
                data: []
            },
            treeConfig: {
                transform: true,
                rowField: 'id',
                parentField: 'parentId'
            },
        }
    },
    methods: {
        loadData(tableData) {
            if (tableData) {
                console.log('llll', tableData)
                this.$refs.vxc.loadData(tableData)
            }

        },
    },
    mounted() {
        var list1 = []
        for (let i = 0; i < 1000; i++) {
            list1.push({
                list: [],
                name: 'test' + 0,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 15566778108881,
                time1: 15566778108882,
                time2: 15566778108883,
                time3: 15566778108884,
                time4: 15566778108885,
                time5: 15566778108886,
                time6: 15566778108887,
                time7: 15566778108888,
                time8: 15566778108889,
                region: 'ShenZhen',
                address: 'address abc' + index,
                id: 0,
                parentId: null,
            })
        }
        for (var index = 1; index < 1099; index++) {
            list1.push({
                list: list1,
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 100,
                time1: 1556677810888 + index * 200,
                time2: 1556677810888 + index * 300,
                time3: 1556677810888 + index * 400,
                time4: 1556677810888 + index * 500,
                time5: 1556677810888 + index * 600,
                time6: 1556677810888 + index * 700,
                time7: 1556677810888 + index * 800,
                time8: 1556677810888 + index * 900,
                region: 'ShenZhen',
                address: 'address abc' + index,
                id: index,
                parentId: 0,
            })
        }
        console.log('list', list1)
        this.loadData(list1)
    }
};
var app = new Vue(Main).$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@2">

</script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils">

</script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3">

</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<div id="app">
	<template>
		<div>
			<p>Table 演示</p>
			<vxe-table 
                :tree-config="treeConfig"
                ref="vxc" 
                height="500"
            >
				<vxe-table-column field="name" title="Name" :tree-node="true" fixed="left"></vxe-table-column>
				<vxe-table-column field="sex" title="Sex" fixed="left"></vxe-table-column>
				<vxe-table-column field="date" title="date" fixed="left"></vxe-table-column>
				<vxe-table-column field="time" title="time"></vxe-table-column>
				<vxe-table-column field="time1" title="time1" fixed="left"></vxe-table-column>
				<vxe-table-column field="time2" title="time2"></vxe-table-column>
				<vxe-table-column field="time3" title="time3"></vxe-table-column>
				<vxe-table-column field="time4" title="time4"></vxe-table-column>
				<vxe-table-column field="time5" title="time5"></vxe-table-column>
				<vxe-table-column field="time6" title="time6"></vxe-table-column>
				<vxe-table-column field="time7" title="time7"></vxe-table-column>
				<vxe-table-column field="time8" title="time8"></vxe-table-column>
				<vxe-table-column field="address" title="Address"></vxe-table-column>
			</vxe-table>
		</div>
	</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");