selectMutilPicker.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <!-- 多列联动列选择器 -->
  3. <u-select v-model="is_show" mode="mutil-column-auto" value-name="value_name" :list="list" @confirm="confirm"></u-select>
  4. </template>
  5. <script>
  6. export default {
  7. props: {
  8. list: {
  9. default () {
  10. return []
  11. }
  12. },
  13. /*
  14. mode = single-column,为单列选择模式。
  15. mode = mutil-column,为多列选择模式。
  16. mode = muitl-column-auto,为多列联动模式,多列联动的数据格式为树装结构
  17. */
  18. // model: {
  19. // default () {
  20. // return 'muitl-column-auto'
  21. // }
  22. // },
  23. title: {
  24. default () {
  25. return ''
  26. }
  27. },
  28. value_name: {
  29. default () {
  30. return 'value'
  31. }
  32. },
  33. label_name: {
  34. default () {
  35. return 'label'
  36. }
  37. }
  38. },
  39. data() {
  40. return {
  41. is_show: false,
  42. }
  43. },
  44. methods: {
  45. show() {
  46. this.is_show = true
  47. console.log(this.list)
  48. },
  49. hide() {
  50. this.is_show = false
  51. },
  52. confirm(e) {
  53. console.log(e)
  54. this.$emit('vacChange', e)
  55. }
  56. }
  57. }
  58. </script>
  59. <style>
  60. </style>