-
Notifications
You must be signed in to change notification settings - Fork 74
/
VSlotMode.vue
executable file
·118 lines (111 loc) · 2.44 KB
/
VSlotMode.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
<table-lite
:is-slot-mode="true"
:is-loading="table.isLoading"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
@do-search="doSearch"
@is-finished="table.isLoading = false"
>
<template v-slot:name="data">
<Test>
{{ data.value.name }}
</Test>
</template>
</table-lite>
</template>
<script>
import { defineComponent, reactive } from "vue";
import TableLite from "../components/TableLite.vue";
import Test from "../components/Test.vue";
// Fake Data for 'asc' sortable
const sampleData1 = (offst, limit) => {
offst = offst + 1;
let data = [];
for (let i = offst; i <= limit; i++) {
data.push({
id: i,
name: "TEST" + i,
email: "test" + i + "@example.com",
});
}
return data;
};
// Fake Data for 'desc' sortable
const sampleData2 = (offst, limit) => {
let data = [];
for (let i = limit; i > offst; i--) {
data.push({
id: i,
name: "TEST" + i,
email: "test" + i + "@example.com",
});
}
return data;
};
export default defineComponent({
name: "App",
components: { TableLite, Test },
setup() {
// Table config
const table = reactive({
isLoading: false,
columns: [
{
label: "ID",
field: "id",
width: "3%",
sortable: true,
isKey: true,
},
{
label: "Name",
field: "name",
width: "10%",
sortable: true,
},
{
label: "Email",
field: "email",
width: "15%",
sortable: true,
},
],
rows: [],
totalRecordCount: 0,
sortable: {
order: "id",
sort: "asc",
},
});
/**
* Search Event
*/
const doSearch = (offset, limit, order, sort) => {
table.isLoading = true;
setTimeout(() => {
table.isReSearch = offset == undefined ? true : false;
if (offset >= 10 || limit >= 20) {
limit = 20;
}
if (sort == "asc") {
table.rows = sampleData1(offset, limit);
} else {
table.rows = sampleData2(offset, limit);
}
table.totalRecordCount = 20;
table.sortable.order = order;
table.sortable.sort = sort;
}, 600);
};
// First get data
doSearch(0, 10, "id", "asc");
return {
table,
doSearch,
};
},
});
</script>