index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <xm-cascader
  3. ref="cascaderRef"
  4. v-model="value"
  5. :options="list"
  6. :checkStrictly="checkStrictly"
  7. @input="handleInput"
  8. :showAllLevels="true"
  9. @confirm="handleConfirm"
  10. :props="{
  11. value: 'id',
  12. label: 'mtTypeName',
  13. children: 'children'
  14. }"
  15. >
  16. </xm-cascader>
  17. </template>
  18. <script>
  19. import { mtTypeTreeList} from "@/api/common/system.js";
  20. import {clearProps,copyProps,toTree} from '@/utils/gdtq.js'
  21. export default {
  22. props: {
  23. checkStrictly: { //传入此参数columns无效
  24. type: Boolean,
  25. default: true,
  26. },
  27. },
  28. data() {
  29. return {
  30. value: '',
  31. list: [
  32. /* {
  33. "code": 1,
  34. "areaName": "Parent 1",
  35. "parentId": 0,
  36. "child": [{
  37. "code": 2,
  38. "areaName": "Child 1.1",
  39. "parentId": 1,
  40. "child": []
  41. },
  42. {
  43. "code": 3,
  44. "areaName": "Child 1.2",
  45. "parentId": 1,
  46. "child": []
  47. }
  48. ]
  49. }, */
  50. ],
  51. }
  52. },
  53. created() {
  54. this.initOptions()
  55. },
  56. methods: {
  57. async initOptions() {
  58. let { data } = await mtTypeTreeList({});
  59. this.list = data
  60. // this.list = toTree(data, "id", "parentId");
  61. },
  62. handleInput(e) {
  63. // console.log(e,'eeee')
  64. },
  65. show() {
  66. this.$refs.cascaderRef.openDept()
  67. },
  68. close() {
  69. this.$refs.cascaderRef.close()
  70. },
  71. handleConfirm(e) {
  72. this.$emit('confirm', e)
  73. },
  74. }
  75. }
  76. </script>
  77. <style lang="scss" scoped></style>