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>
<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");