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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
| <template>
| <div>
| <Divider class="component-blue" orientation="left">自定义列表选择</Divider>
| <div style="font-size: 12px; margin-bottom: 10px">
| 获取用户列表示例（请求地址url="/user/getAll"
| 指定绑定的value字段valueBind="id" 指定标题字段title="nickname"
| 指定备注字段description="username"）：
| </div>
| <code>{{ customList1 }}</code>
| <br />
| <br />
| <div style="font-size: 12px; margin-bottom: 10px">
| 获取角色列表示例（请求地址url="/role/getAllList"
| 指定绑定的value字段valueBind="name" 指定标题字段title="name"
| 指定备注字段description="description"）：
| </div>
| <customList
| v-model="customList2"
| url="/role/getAllList"
| valueBind="name"
| title="name"
| style="width: 300px; display: inline-block; margin-right: 10px"
| />
| {{ customList2 }}
| <br />
| <h3 class="component-article">基础用法</h3>
| 基本用法，传入
| <code>请求url</code
| >、<code>绑定值valueBind</code>、<code>标题title</code>、<code>备注description(可选)</code>属性获取指定接口数据，
| 使用 <code>v-model</code> 实现数据的双向绑定。
| <h3 class="component-article">数据结构</h3>
| 列表接口返回的数据结构需满足XBoot框架的规范，至少包含
| <code>success</code>（成功标志）与 <code>result</code>（数据列表）：
| <code>{ success: true/false, result: [] }</code>
| <h3 class="component-article">props</h3>
| <Table
| :columns="props"
| :data="data1"
| border
| size="small"
| width="1000"
| ></Table>
| <h3 class="component-article">events</h3>
| <Table
| :columns="events"
| :data="data2"
| border
| size="small"
| width="1000"
| ></Table>
| </div>
| </template>
| <script>
| import { props, events, methods } from "./columns";
| import customList from "@/views/my-components/xboot/custom-list";
| export default {
| components: {
| customList,
| },
| data() {
| return {
| customList1:
| '<customList v-model="data" url="/user/getAll" valueBind="id" title="nickname" description="username"/>',
| customList2: "",
| props: props,
| events: events,
| methods: methods,
| data1: [
| {
| name: "value",
| desc: "绑定的值，可使用 v-model 双向绑定",
| type: "String",
| value: "空",
| },
| {
| name: "preUrl",
| desc: "请求地址url前缀，由preUrl+url构成完整请求url",
| type: "String",
| value: "/xboot",
| },
| {
| name: "url",
| desc: "请求地址url，由preUrl+url构成完整请求url",
| type: "String",
| value: "-",
| },
| {
| name: "method",
| desc: "请求方法，如get、post、put、delete等",
| type: "String",
| value: "get",
| },
| {
| name: "auth",
| desc:
| "是否需要认证的请求，设为true后请求头会携带认证使用的accessToken",
| type: "Boolean",
| value: "true",
| },
| {
| name: "valueBind",
| desc: "指定绑定的value字段",
| type: "String",
| value: "id",
| },
| {
| name: "title",
| desc: "指定标题title的字段",
| type: "String",
| value: "title",
| },
| {
| name: "description",
| desc: "指定备注描述description的字段",
| type: "String",
| value: "description",
| },
| {
| name: "size",
| desc: "选择框大小，可选值为large、small、default或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "placeholder",
| desc: "选择框默认文字",
| type: "String",
| value: "请选择",
| },
| {
| name: "notFoundText",
| desc: "当下拉列表为空时显示的内容",
| type: "String",
| value: "无匹配数据",
| },
| {
| name: "labelInValue",
| desc:
| "在返回选项时，是否将 label 和 value 一并返回，默认只返回 value",
| type: "Boolean",
| value: "false",
| },
| {
| name: "placement",
| desc:
| "弹窗的展开方向，可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end",
| type: "String",
| value: "bottom-start",
| },
| {
| name: "multiple",
| desc: "是否支持多选",
| type: "Boolean",
| value: "false",
| },
| {
| name: "disabled",
| desc: "是否禁用",
| type: "Boolean",
| value: "false",
| },
| {
| name: "filterable",
| desc: "是否支持搜索",
| type: "Boolean",
| value: "false",
| },
| {
| name: "transfer",
| desc:
| "是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果",
| type: "Boolean",
| value: "false",
| },
| {
| name: "transferClassName",
| desc: "开启 transfer 时，给浮层添加额外的 class 名称",
| type: "String",
| value: "-",
| },
| {
| name: "prefix",
| desc: "在 Select 内显示图标",
| type: "String",
| value: "-",
| },
| {
| name: "maxTagCount",
| desc: "多选时最多显示多少个 tag",
| type: "Number",
| value: "-",
| },
| {
| name: "maxTagPlaceholder",
| desc: "隐藏 tag 时显示的内容，参数是剩余项数量",
| type: "Function",
| value: "-",
| },
| {
| name: "clearable",
| desc: "是否可以清空选项，只在单选时有效",
| type: "Boolean",
| value: "true",
| },
| ],
| data2: [
| {
| name: "on-change",
| type:
| "选中的Option变化时触发，默认返回 value，如需返回 label，详见 label-in-value 属性",
| value: "当前选中项",
| },
| {
| name: "on-query-change",
| type: "搜索词改变时触发",
| value: "query",
| },
| {
| name: "on-clear",
| type: "点击清空按钮时触发",
| value: "无",
| },
| {
| name: "on-open-change",
| type: "下拉框展开或收起时触发",
| value: "true / false",
| },
| {
| name: "on-select",
| type: "选择项目时触发",
| value: "当前选中项",
| },
| ],
| };
| },
| methods: {},
| mounted() {},
| };
| </script>
|
|
