|
1 |
| -<script> |
2 |
| -import { Select } from "ant-design-vue"; |
3 |
| -
|
4 |
| -export default { |
5 |
| - components: { |
6 |
| - [Select.name]: Select, |
7 |
| - [Select.OptGroup.name]: Select.OptGroup, |
8 |
| - [Select.Option.name]: Select.Option |
9 |
| - }, |
10 |
| - props: { |
11 |
| - value: { |
12 |
| - type: String, |
13 |
| - default: "" |
14 |
| - }, |
15 |
| - options: { |
16 |
| - type: Array, |
17 |
| - default: () => [] |
18 |
| - } |
19 |
| - }, |
20 |
| - watch: { |
21 |
| - value(val) {} |
22 |
| - }, |
23 |
| - data() { |
24 |
| - return { |
25 |
| - optionData: [] |
26 |
| - }; |
27 |
| - }, |
28 |
| - created() { |
29 |
| - this.optionData = this.handleData(this.options); |
30 |
| - }, |
31 |
| - methods: { |
32 |
| - handleData(data, pItem) { |
33 |
| - return data |
34 |
| - ? data.map(item => { |
35 |
| - if (pItem && pItem.folder) { |
36 |
| - item._key = `${pItem.folder}_${item.folder}`; |
37 |
| - item.checkedTitle = `${pItem.title}-${item.title}`; |
38 |
| - } else { |
39 |
| - item._key = `${item.folder}`; |
40 |
| - item.checkedTitle = item.title; |
41 |
| - } |
42 |
| - if (item.items) { |
43 |
| - item.items = this.handleData(item.items, item); |
44 |
| - } |
45 |
| - return item; |
46 |
| - }) |
47 |
| - : []; |
48 |
| - }, |
49 |
| - renderOptions(item) { |
50 |
| - if (item.items) { |
51 |
| - // 分组 |
52 |
| - return this.renderGroup(item); |
53 |
| - } |
54 |
| - return this.renderOption(item); |
55 |
| - }, |
56 |
| - renderGroup(item) { |
57 |
| - const itemArr = []; |
58 |
| - if (item.items && item.items.length) { |
59 |
| - item.items.forEach(p => itemArr.push(this.renderOptions(p))); |
60 |
| - return ( |
61 |
| - <a-select-opt-group> |
62 |
| - <span slot="label">{item.title}</span> |
63 |
| - {itemArr} |
64 |
| - </a-select-opt-group> |
65 |
| - ); |
66 |
| - } |
67 |
| - return null; |
68 |
| - }, |
69 |
| - renderOption(item) { |
70 |
| - return ( |
71 |
| - <a-select-option value={item._key} label={item.checkedTitle}> |
72 |
| - {item.title} |
73 |
| - </a-select-option> |
74 |
| - ); |
75 |
| - }, |
76 |
| - onChange(val) { |
77 |
| - this.$emit("change", val); |
78 |
| - } |
79 |
| - }, |
80 |
| - render() { |
81 |
| - const { onChange, value } = this; |
82 |
| - const selectOptions = this.optionData.map(item => { |
83 |
| - return this.renderOptions(item); |
84 |
| - }); |
85 |
| - return ( |
86 |
| - <a-select |
87 |
| - style="width: 200px" |
88 |
| - {...{ |
89 |
| - props: { "option-label-prop": "label", value: value }, |
90 |
| - on: { change: onChange } |
91 |
| - }} |
92 |
| - > |
93 |
| - {selectOptions} |
94 |
| - </a-select> |
95 |
| - ); |
96 |
| - } |
97 |
| -}; |
98 |
| -</script> |
| 1 | +<script> |
| 2 | +import { Select, Icon } from "ant-design-vue"; |
| 3 | +
|
| 4 | +export default { |
| 5 | + components: { |
| 6 | + [Select.name]: Select, |
| 7 | + [Select.OptGroup.name]: Select.OptGroup, |
| 8 | + [Select.Option.name]: Select.Option, |
| 9 | + [Icon.name]: Icon |
| 10 | + }, |
| 11 | + props: { |
| 12 | + value: { |
| 13 | + type: String, |
| 14 | + default: "" |
| 15 | + }, |
| 16 | + options: { |
| 17 | + type: Array, |
| 18 | + default: () => [] |
| 19 | + } |
| 20 | + }, |
| 21 | +
|
| 22 | + data() { |
| 23 | + return { |
| 24 | + optionData: [] |
| 25 | + }; |
| 26 | + }, |
| 27 | + created() { |
| 28 | + this.optionData = this.handleData(this.options); |
| 29 | + }, |
| 30 | + methods: { |
| 31 | + handleData(data, pItem) { |
| 32 | + return data |
| 33 | + ? data.map(item => { |
| 34 | + if (pItem && pItem.folder) { |
| 35 | + item._key = `${pItem.folder}_${item.folder}`; |
| 36 | + item.checkedTitle = `${pItem.title}-${item.title}`; |
| 37 | + } else { |
| 38 | + item._key = `${item.folder}`; |
| 39 | + item.checkedTitle = item.title; |
| 40 | + } |
| 41 | + if (item.items) { |
| 42 | + item.items = this.handleData(item.items, item); |
| 43 | + } |
| 44 | + return item; |
| 45 | + }) |
| 46 | + : []; |
| 47 | + }, |
| 48 | + renderOptions(item) { |
| 49 | + if (item.items) { |
| 50 | + // 分组 |
| 51 | + return this.renderGroup(item); |
| 52 | + } |
| 53 | + return this.renderOption(item); |
| 54 | + }, |
| 55 | + renderGroup(item) { |
| 56 | + const itemArr = []; |
| 57 | + if (item.items && item.items.length) { |
| 58 | + item.items.forEach(p => itemArr.push(this.renderOptions(p))); |
| 59 | + return ( |
| 60 | + <a-select-opt-group> |
| 61 | + <span slot="label">{item.title}</span> |
| 62 | + {itemArr} |
| 63 | + </a-select-opt-group> |
| 64 | + ); |
| 65 | + } |
| 66 | + return null; |
| 67 | + }, |
| 68 | + renderOption(item) { |
| 69 | + const lockIcon = item.hasPassword ? <a-icon type="lock" /> : ""; |
| 70 | + return ( |
| 71 | + <a-select-option value={item._key} label={item.checkedTitle}> |
| 72 | + <div class="app-select-option"> |
| 73 | + <div class="app-select-option_title">{item.title}</div> |
| 74 | + <div class="app-select-option_icon">{lockIcon}</div> |
| 75 | + </div> |
| 76 | + </a-select-option> |
| 77 | + ); |
| 78 | + }, |
| 79 | + onChange(val) { |
| 80 | + this.$emit("change", val); |
| 81 | + } |
| 82 | + }, |
| 83 | + render() { |
| 84 | + const { onChange, value } = this; |
| 85 | + const selectOptions = this.optionData.map(item => { |
| 86 | + return this.renderOptions(item); |
| 87 | + }); |
| 88 | + return ( |
| 89 | + <a-select |
| 90 | + style="width: 200px" |
| 91 | + {...{ |
| 92 | + props: { "option-label-prop": "label", value: value }, |
| 93 | + on: { change: onChange } |
| 94 | + }} |
| 95 | + > |
| 96 | + {selectOptions} |
| 97 | + </a-select> |
| 98 | + ); |
| 99 | + } |
| 100 | +}; |
| 101 | +</script> |
| 102 | +<style lang="less" scoped> |
| 103 | +.app-select-option { |
| 104 | + display: flex; |
| 105 | + &_title { |
| 106 | + flex: 1; |
| 107 | + white-space: nowrap; |
| 108 | + text-overflow: ellipsis; |
| 109 | + overflow: hidden; |
| 110 | + word-break: break-all; |
| 111 | + } |
| 112 | + &_icon { |
| 113 | + color: #999; |
| 114 | + } |
| 115 | +} |
| 116 | +</style> |
0 commit comments