123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <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>
|