v-select.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <view style="width: 100%;">
  3. <u-input :value="selected" :input-align="inputAlign" :placeholder="placeholder" @click="showPick=true" type="select" />
  4. <u-picker mode="selector" v-model="showPick" @confirm="toChange" :default-selector="[0]" :range="datalist" range-key="dispName"></u-picker>
  5. </view>
  6. </template>
  7. <script>
  8. import { getLookUpDatas, listLookUp } from '@/api/data'
  9. export default {
  10. name: 'v-select',
  11. data () {
  12. return {
  13. selected: '',
  14. datalist: [],
  15. placeholderText: '请选择',
  16. lookUp: [],
  17. index: 0,
  18. showPick: false
  19. }
  20. },
  21. props: {
  22. disabled: {
  23. type: [Boolean, String],
  24. default: false
  25. },
  26. inputAlign: {
  27. type: String,
  28. default:'left'
  29. },
  30. value: [String, Number, Array],
  31. code: {
  32. type: String,
  33. required: true
  34. },
  35. placeholder: {
  36. type: String,
  37. default: ''
  38. },
  39. },
  40. created () {
  41. if (this.code) {
  42. if (this.placeholder) {
  43. this.placeholderText = this.placeholder
  44. }
  45. getLookUpDatas({
  46. type: this.code
  47. }).then(result => {
  48. console.log(result, 'result')
  49. if (result && result.status + '' === '200') {
  50. this.datalist = result.data
  51. // 设置默认值
  52. this.setVal(this.value)
  53. }
  54. })
  55. }
  56. // 获取所有数据字典
  57. this.lookUp = this.$store.state.vuex_allLookUp
  58. },
  59. methods: {
  60. getDataList (){
  61. console.log(this.datalist)
  62. return this.datalist
  63. },
  64. getOptionName (val) {
  65. return this.datalist.find((item) => {
  66. return item.code == val
  67. })
  68. },
  69. getCodeByName (dispName) {
  70. return this.datalist.find((item) => {
  71. return item.dispName == dispName
  72. })
  73. },
  74. resetVal(){
  75. this.selected = ''
  76. this.index = 0
  77. },
  78. // 赋值
  79. setVal(code){
  80. let index = this.datalist.findIndex(item=>{
  81. return item.code == code
  82. })
  83. this.index = index
  84. this.selected = this.datalist[index].dispName
  85. },
  86. toChange (e) {
  87. this.index = e[0]
  88. this.selected = this.datalist[this.index].dispName
  89. this.$emit('input', this.datalist[this.index].code)
  90. this.$emit('change', this.datalist[this.index].code)
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. .v-select{
  97. width: 100%;
  98. .form-input{
  99. flex-grow: 1;
  100. }
  101. }
  102. </style>