基於vue的Element-ui定義自己的select元件

<template>
  <div>
    <el-select v-model="svalue" placeholder="請選擇" filterable>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <!-- <el-button @click="clickme()">預設按鈕</el-button> -->
    <!-- <input type="text" :value="value"> -->
  </div>
</template>

<script>
  export default {
    name: 'XdhSelect',
    data() {
      return {
        options:[],
        svalue: ''
      }
    },
    methods: {
        // clickme(){
        //     alert(this.svalue);
        // },
        //轉換下拉框下的欄位
       _dataTransform(data){
          let _data = [];
          for (let i = 0; i < data.length; i++) {
              _data[i] = {};
              _data[i].label = data[i][this.fileType.label];
              _data[i].value = data[i][this.fileType.value];
            }
            return _data;
       }
     },
     watch:{
        //判斷下拉框的值是否有改變
        svalue(val, oldVal) {
            // console.log('new: %s, old: %s', val, oldVal)
            if(val!=oldVal){
                this.$emit('input', this.svalue); 
            }
        }, 
    },
    props: {
       url:{
          type:String
       },//匯入的url地址
       value: {
          type: String
       },//接受外部v-model傳入的值
       fileType:{
          type:Object
       }//定義請求回來的json資料格式
    },
    mounted(){
        //初始話下拉框的值
        this.svalue=this.value;
        //遠端請求回來的資料
        this.$fetch(this.url)
            .then((response) => {
                this.options=this._dataTransform(response);
        })
    }
  }
</script>

複製程式碼

元件用法

<xdh-select :url="'/api/option'" v-model="isShow" :fileType="{'value':'dasm','label':'dasmb'}"></xdh-select>
複製程式碼

url為請求連線，fileType為返回的資料格式