mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-15 14:03:36 +08:00
122
src/views/table/base/tree.vue
Normal file
122
src/views/table/base/tree.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
interface User {
|
||||
id: number;
|
||||
date: string;
|
||||
name: string;
|
||||
hasChildren?: boolean;
|
||||
children?: User[];
|
||||
}
|
||||
|
||||
const load = (
|
||||
row: User,
|
||||
treeNode: unknown,
|
||||
resolve: (date: User[]) => void
|
||||
) => {
|
||||
setTimeout(() => {
|
||||
resolve([
|
||||
{
|
||||
id: 31,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu"
|
||||
}
|
||||
]);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const tableData: User[] = [
|
||||
{
|
||||
id: 1,
|
||||
date: "2016-05-02",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: "2016-05-04",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "2016-05-03",
|
||||
name: "wangxiaohu"
|
||||
}
|
||||
];
|
||||
|
||||
const tableData1: User[] = [
|
||||
{
|
||||
id: 1,
|
||||
date: "2016-05-02",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: "2016-05-04",
|
||||
name: "wangxiaohu"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: "2016-05-01",
|
||||
name: "wangxiaohu",
|
||||
hasChildren: true
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: "2016-05-03",
|
||||
name: "wangxiaohu"
|
||||
}
|
||||
];
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<pure-table
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
border
|
||||
default-expand-all
|
||||
class="mb-6"
|
||||
/>
|
||||
<pure-table
|
||||
:data="tableData1"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
border
|
||||
lazy
|
||||
:load="load"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user