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;
}