Select.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <el-select v-model="value" clearable :placeholder="placeholder" @change="selectChange">
  3. <el-option
  4. v-for="item in options"
  5. :key="item[id]"
  6. :label="item[label]"
  7. :value="item[id]">
  8. </el-option>
  9. </el-select>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'Select',
  14. props: {
  15. placeholder: {
  16. type: String,
  17. default: '请选择'
  18. },
  19. id: {
  20. type: String,
  21. default: 'id'
  22. },
  23. label: {
  24. type: String,
  25. default: 'name'
  26. },
  27. codeOptions: {
  28. type: String,
  29. default: 'options'
  30. }
  31. },
  32. inject: {
  33. selectServiceData: {
  34. type: Object,
  35. default: () => {
  36. },
  37. },
  38. },
  39. computed: {
  40. options() {
  41. return this.selectServiceData[this.codeOptions];
  42. },
  43. value: {
  44. get() {
  45. return this.selectServiceData[this.id];
  46. },
  47. set(val) {
  48. console.log(val)
  49. this.selectServiceData[this.id] = val;
  50. },
  51. },
  52. },
  53. methods: {
  54. selectChange(val) {
  55. this.$emit('select-change', val)
  56. }
  57. },
  58. };
  59. </script>
  60. <style scoped>
  61. </style>