展开所有树
关闭所有树展开
展开所有行
关闭所有行展开
<vxe-table
border
ref="tableRef"
:tree-config="{rowKey: 'id', children: 'children'}"
:expand-config="{visibleMethod, trigger: 'cell', showIcon: true
, iconOpen:'el-icon-minus', iconClose:'el-icon-plus', padding: true}"
:data="tableData">
<vxe-column type="checkbox" width="40" field="checkbox" align="center">
<template #footer="{ row }" >
<span style="font-weight: 700;">{{ row.propertyName }}</span>
</template>
</vxe-column>
<vxe-column type="expand" width="80" field="expand" align="center">
<template #content="{ row }" >
<ul class="expand-wrapper">
<li>
<span>ID：</span>
<span>{{ row.id }}</span>
</li>
<li>
<span>Name：</span>
<span>{{ row.name }}</span>
</li>
<li>
<span>Date</span>
<span>{{ row.date }}</span>
</li>
</ul>
</template>
</vxe-column>
<vxe-column field="name" title="Name" tree-node></vxe-column>
<vxe-column field="size" title="Size"></vxe-column>
<vxe-column field="type" title="Type"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
</vxe-table>
<script>
export default {
name: "OwnerByCheck",
data() {
const tableData = [
{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01',
children:[
{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' }
]
},
];
return {
tableData
};
},
methods: {
expandAllTreeEvent() {
const $table = this.$refs.tableRef;
if ($table) {
$table.setAllTreeExpand(true);
}
},
claseExpandTreeEvent() {
const $table = this.$refs.tableRef;
if ($table) {
$table.clearTreeExpand();
}
},
expandAllRowEvent() {
const $table = this.$refs.tableRef;
if ($table) {
$table.setAllRowExpand(true);
}
},
visibleMethod({ row }) {
return row.parentId;
},
clearExpandRowEvent() {
const $table = this.$refs.tableRef;
if ($table) {
$table.clearRowExpand();
}
}
}
};
</script>
子项行无法展开
展开所有树 关闭所有树展开 展开所有行 关闭所有行展开
子项行无法展开