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
| <template>
| <div>
| <Divider class="component-blue" orientation="left">数组字典组件</Divider>
| <dict dict="sex" transfer style="width: 300px" />
| <br />
| <dict dict="permission_type" transfer style="width: 300px" />
| <h3 class="component-article">基础用法</h3>
| 基本用法，传入 <code>dict</code>属性获取指定的数据字典类型， 使用
| <code>v-model</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 dict from "@/views/my-components/xboot/dict";
| export default {
| components: {
| dict,
| },
| data() {
| return {
| props: props,
| events: events,
| methods: methods,
| data1: [
| {
| name: "dict",
| desc: "获取指定类型的数据字典【必须填入】",
| type: "String",
| value: "空",
| },
| {
| name: "value",
| desc:
| "绑定的值，可使用 v-model 双向绑定。单选时只接受 String 或 Number，多选时只接受 Array",
| type: "String | Number | Array",
| value: "空",
| },
| {
| name: "multiple",
| desc: "是否支持多选",
| type: "Boolean",
| value: "false",
| },
| {
| name: "disabled",
| desc: "是否禁用",
| type: "Boolean",
| value: "false",
| },
| {
| name: "clearable",
| desc: "是否可以清空选项，只在单选时有效",
| type: "Boolean",
| value: "true",
| },
| {
| name: "filterable",
| desc: "是否支持搜索",
| type: "Boolean",
| value: "false",
| },
| {
| name: "size",
| desc: "选择框大小，可选值为large、small、default或者不填",
| type: "String",
| value: "-",
| },
| {
| name: "placeholder",
| desc: "选择框默认文字",
| type: "String",
| value: "请选择",
| },
| {
| name: "placement",
| desc:
| "弹窗的展开方向，可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end",
| type: "String",
| value: "bottom-start",
| },
| {
| name: "transfer",
| desc:
| "是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果",
| type: "Boolean",
| value: "false",
| },
| {
| name: "transfer-class-name",
| desc: "开启 transfer 时，给浮层添加额外的 class 名称",
| type: "String",
| value: "-",
| },
| {
| name: "prefix",
| desc: "在 Select 内显示图标",
| type: "String",
| value: "-",
| },
| {
| name: "max-tag-count",
| desc: "多选时最多显示多少个 tag",
| type: "Number",
| value: "-",
| },
| {
| name: "max-tag-placeholder",
| desc: "隐藏 tag 时显示的内容，参数是剩余项数量",
| type: "Function",
| value: "-",
| },
| ],
| data2: [
| {
| name: "on-change",
| type: "选中的Option变化时触发，默认返回 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>
|
|
