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
| <template>
| <div>
| <Divider class="component-blue" orientation="left">部门树选择</Divider>
| <department-tree-choose
| multiple
| style="width: 400px"
| @on-change="handleSelectDepTree"
| ref="depTree"
| ></department-tree-choose>
| <br />
| {{ selectDeps }}
| <h3 class="component-article">样式冲突</h3>
| 在 <code>FormItem</code> 中使用时，建议在该标签上加上
| <code>class="form-noheight"</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>
| <h3 class="component-article">methods</h3>
| <Table
| :columns="methods"
| :data="data3"
| border
| size="small"
| width="1000"
| ></Table>
| </div>
| </template>
| <script>
| import { props, events, methods } from "./columns";
| import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
| export default {
| components: {
| departmentTreeChoose,
| },
| data() {
| return {
| props: props,
| events: events,
| methods: methods,
| selectDeps: [],
| data1: [
| {
| name: "text",
| desc: "选择部门按钮文字",
| type: "String",
| value: "选择用户",
| },
| {
| name: "icon",
| desc: "选择部门按钮图标",
| type: "String",
| value: "md-person-add",
| },
| {
| name: "placeholder",
| desc: "提示文字",
| type: "String",
| value: "点击选择部门",
| },
| {
| name: "multiple",
| desc: "是否选开启多选，默认false不开启",
| type: "Boolean",
| value: "false",
| },
| {
| name: "clearable",
| desc: "是否显示清空按钮",
| type: "Boolean",
| value: "true",
| },
| {
| name: "disabled",
| desc: "是否禁用",
| type: "Boolean",
| value: "false",
| },
| {
| name: "size",
| desc: "大小，可选值为large、small、default或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "type",
| desc:
| "按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "ghost",
| desc: "幽灵属性，使按钮背景透明",
| type: "Boolean",
| value: "false",
| },
| {
| name: "shape",
| desc: "按钮形状，可选值为circle或者不设置",
| type: "String",
| value: "-",
| },
| {
| name: "prefix",
| desc: "输入框头部图标",
| type: "String",
| value: "-",
| },
| {
| name: "suffix",
| desc: "输入框尾部图标",
| type: "String",
| value: "-",
| },
| ],
| data2: [
| {
| name: "on-change",
| type: "返回选择部门id字符串(非多选)或数组(开启多选)",
| value:
| '选择部门id字符串或数组Array，仅包含部门id，例如"1"(非多选)或["1","2","3"](开启多选)',
| },
| {
| name: "on-clear",
| type: "开启clearable时可用，点击清空按钮时触发",
| value: "无",
| },
| ],
| data3: [
| {
| name: "setData",
| type: "设置已选部门数据（回显使用）",
| value:
| "第一个参数为部门id字符串(非多选)或数组Array(开启多选)，第二个参数为部门标题（String）",
| },
| ],
| };
| },
| methods: {
| handleSelectDepTree(v) {
| this.selectDeps = v;
| },
| },
| mounted() {},
| };
| </script>
|
|
