v-select.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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="[index]" :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. mounted () {
  41. if (this.code) {
  42. if (this.placeholder) {
  43. this.placeholderText = this.placeholder
  44. }
  45. getLookUpDatas({
  46. type: this.code
  47. }).then(result => {
  48. if (result && result.status + '' === '200') {
  49. this.datalist = result.data
  50. if(this.value){
  51. this.setVal(this.value)
  52. }
  53. }
  54. })
  55. }
  56. },
  57. methods: {
  58. getDataList (){
  59. return this.datalist
  60. },
  61. getOptionName (val) {
  62. return this.datalist.find((item) => {
  63. return item.code == val
  64. })
  65. },
  66. getCodeByName (dispName) {
  67. return this.datalist.find((item) => {
  68. return item.dispName == dispName
  69. })
  70. },
  71. resetVal(){
  72. this.selected = ''
  73. this.index = 0
  74. },
  75. // 赋值
  76. setVal(code){
  77. let index = this.datalist.findIndex(item=>{
  78. return item.code == code
  79. })
  80. this.index = index
  81. this.selected = this.datalist[index].dispName
  82. },
  83. toChange (e) {
  84. this.index = e[0]
  85. this.selected = this.datalist[this.index].dispName
  86. this.$emit('input', this.datalist[this.index].code)
  87. this.$emit('change', this.datalist[this.index].code)
  88. }
  89. }
  90. }
  91. </script>
  92. <style lang="scss" scoped>
  93. .v-select{
  94. width: 100%;
  95. .form-input{
  96. flex-grow: 1;
  97. }
  98. }
  99. </style>