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
| <template>
| <frame-view>
| <arco-table
| v-model:filter-data="filterData"
| :filter-config="filterConfig"
| :table-config="getConfig"
| :req="getData"
| ></arco-table>
| </frame-view>
| </template>
| <script lang="ts" setup>
| import { testList } from "@/config/apis/common";
| import { ArcoTable, formHelper, tableHelper } from "@easyfe/admin-component";
|
| const filterData = ref({
| tabsData: "1"
| });
|
| const getData = computed(() => {
| return {
| fn: testList,
| params: {
| ...filterData.value
| }
| };
| });
|
| const filterConfig = computed(() => {
| return [
| formHelper.input("测试", "test", {
| span: 8
| }),
| formHelper.input("测试2", "test2", {
| span: 8
| }),
| formHelper.datePicker("日期", "key10", {
| type: "date",
| span: 8
| })
| ];
| });
|
| const getConfig = computed(() => {
| return tableHelper.create({
| pageKey: "_page",
| sizeKey: "_size",
| rowKey: "",
| arcoProps: {
| rowKey: "id",
| bordered: false,
| rowSelection: {
| type: "checkbox",
| showCheckedAll: true
| }
| },
| blBtns: [
| {
| label: "编辑",
| type: "primary"
| },
| {
| label: "删除",
| status: "danger"
| }
| ],
| tlBtns: [
| {
| label: "全部",
| value: "0"
| },
| {
| label: "已发布",
| value: "1"
| },
| {
| label: "草稿箱",
| value: "2"
| }
| ],
| trBtns: [
| {
| label: "新增",
| type: "primary"
| },
| {
| label: "删除",
| status: "danger"
| }
| ],
| columns: [
| tableHelper.default("用户ID", "id", {
| width: 100
| }),
| tableHelper.default("标题", "title"),
| tableHelper.default("内容", "body"),
| tableHelper.btns(
| "操作",
| [
| {
| label: "编辑"
| },
| {
| label: "删除",
| status: "danger"
| }
| ],
| {
| width: 150
| }
| )
| ]
| });
| });
| </script>
|
|
