v-select.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template>
  2. <view style="width: 100%;">
  3. <u-input :value="selected" :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. value: [String, Number, Array],
  27. code: {
  28. type: String,
  29. required: true
  30. },
  31. placeholder: {
  32. type: String,
  33. default: ''
  34. },
  35. },
  36. created () {
  37. if (this.code) {
  38. if (this.placeholder) {
  39. this.placeholderText = this.placeholder
  40. }
  41. getLookUpDatas({
  42. type: this.code
  43. }).then(result => {
  44. console.log(result, 'result')
  45. if (result && result.status + '' === '200') {
  46. this.datalist = result.data
  47. // 设置默认值
  48. this.setVal(this.value)
  49. }
  50. })
  51. }
  52. // 获取所有数据字典
  53. this.lookUp = this.$store.state.vuex_allLookUp
  54. },
  55. methods: {
  56. getDataList (){
  57. return this.datalist
  58. },
  59. getOptionName (val) {
  60. return this.datalist.find((item) => {
  61. return item.code == val
  62. })
  63. },
  64. getCodeByName (dispName) {
  65. return this.datalist.find((item) => {
  66. return item.dispName == dispName
  67. })
  68. },
  69. resetVal(){
  70. this.selected = ''
  71. this.index = 0
  72. },
  73. // 赋值
  74. setVal(code){
  75. let index = this.datalist.findIndex(item=>{
  76. return item.code == code
  77. })
  78. this.index = index
  79. this.selected = this.datalist[index].dispName
  80. },
  81. toChange (e) {
  82. this.index = e[0]
  83. this.selected = this.datalist[this.index].dispName
  84. this.$emit('input', this.datalist[this.index].code)
  85. this.$emit('change', this.datalist[this.index].code)
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. .v-select{
  92. width: 100%;
  93. .form-input{
  94. flex-grow: 1;
  95. }
  96. }
  97. </style>