selectPicker.vue 970 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <!-- 单列选择器 -->
  3. <u-select v-model="is_show" mode="single-column" :value_name="value_name" :label_name="label_name" :list="list"
  4. @confirm="confirm" :default-value="selectDefault"></u-select>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. list: {
  10. default () {
  11. return []
  12. }
  13. },
  14. title: {
  15. default () {
  16. return ''
  17. }
  18. },
  19. value_name: {
  20. default () {
  21. return 'value'
  22. }
  23. },
  24. label_name: {
  25. default () {
  26. return 'label'
  27. }
  28. }
  29. },
  30. data() {
  31. return {
  32. is_show: false,
  33. selectDefault: [0],
  34. }
  35. },
  36. methods: {
  37. show() {
  38. this.is_show = true
  39. // console.log(this.list)
  40. },
  41. hide() {
  42. this.is_show = false
  43. },
  44. confirm(e) {
  45. // console.log(e)
  46. // 将默认下标赋值为当前选中的下标
  47. this.selectDefault = [this.list.findIndex(item => item.value === e[0].value)] || [0];
  48. this.$emit('vacChange', e)
  49. }
  50. },
  51. }
  52. </script>
  53. <style>
  54. </style>