¶Ô±ÈÐÂÎļþ |
| | |
| | | <!-- ç»ä»¶è¯¦æ
请åé
宿¹ææ¡£ï¼https://www.vue-treeselect.cn/ --> |
| | | <template> |
| | | <vue-tree-select |
| | | :class="{inline}" |
| | | :placeholder="placeholder" |
| | | :value="value" |
| | | :options="data" |
| | | :clearable="clearable" |
| | | :flat="flat" |
| | | :append-to-body="appendToBody" |
| | | :multiple="multiple" |
| | | no-children-text="æ è®°å½" |
| | | no-options-text="æ è®°å½" |
| | | no-results-text="æªå¹é
å°æ°æ®" |
| | | @input="$emit('input', $event)" |
| | | /> |
| | | </template> |
| | | |
| | | <script> |
| | | import VueTreeSelect from '@riophae/vue-treeselect' |
| | | import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
| | | export default { |
| | | name: 'TreeSelect', |
| | | props: { |
| | | inline: { |
| | | default: false |
| | | }, |
| | | multiple: { |
| | | default: false |
| | | }, |
| | | flat: { |
| | | default: false |
| | | }, |
| | | value: {}, |
| | | placeholder: { |
| | | default: 'è¯·éæ©' |
| | | }, |
| | | // æ¯å¦å¯æ¸
空 |
| | | clearable: { |
| | | default: false |
| | | }, |
| | | data: { |
| | | type: Array, |
| | | required: true |
| | | }, |
| | | appendToBody: { |
| | | default: false |
| | | } |
| | | }, |
| | | components: { VueTreeSelect } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .inline { |
| | | width: 178px; |
| | | } |
| | | .vue-treeselect { |
| | | line-height: 30px; |
| | | /deep/ .vue-treeselect__control { |
| | | height: 32px; |
| | | .vue-treeselect__single-value { |
| | | line-height: 30px; |
| | | } |
| | | } |
| | | } |
| | | </style> |