index.vue 683 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <div id="app">
  3. <treeselect :options="options" :placeholder="placeholder" :normalizer="normalizer" @input="handelInput" />
  4. </div>
  5. </template>
  6. <script>
  7. import Treeselect from '@riophae/vue-treeselect'
  8. import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  9. export default {
  10. components: { Treeselect },
  11. props: {
  12. // 树状数据
  13. options: {
  14. type: Array
  15. },
  16. // 占位符
  17. placeholder: {
  18. type: String
  19. }
  20. },
  21. data() {
  22. return {
  23. }
  24. },
  25. methods: {
  26. handelInput(val) {
  27. this.$emit('handelGetValue', val)
  28. },
  29. normalizer(node) {
  30. return {
  31. label: node.departmentName
  32. }
  33. }
  34. }
  35. }
  36. </script>