在Vue中封裝一個select元件

我們使用iview封裝一個select元件

封裝的是每一個select下拉框

  <div class='iselect'>
    <!-- 非多選的情況 -->
    <i-select
     v-if='!ismultiple'
     v-model='selecteddata'
     :placeholder='placeholdertext'
     filterable
     clearable
     @on-change='getSelectedData'
    >
      <i-option
       v-for ='item in list'
       :value='item.value'
       :key='item.id'
      >{{item.label}}
      </i-option>
    </i-select>
    <!-- 多選的情況 -->
    <i-select
     v-if='ismultiple'
     v-model='selecteddata'
     :placeholder='placeholdertext'
     filterable
     multiple
     @on-change='getSelectedData'
    >
      <i-option
       v-for ='item in list'
       :value='item.value'
       :key='item.id'
      >{{item.label}}
      </i-option>
    </i-select>
  </div>
</template>

<script>
export default {
  name: 'SelectBox',
  props: {
    placeholder: {
      type: String,
      required: false,
      default: 'Select'
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false
    },
    optionlist: Array
  },
  watch: {
    optionlist (val) {
      this.list = val
    }
  },
  data () {
    return {
      placeholdertext: this.placeholder,
      list: [],
      ismultiple: this.multiple,
      selecteddata: []
    }
  },
  methods: {
    getSelectedData (value) {
      this.selecteddata = value
      this.$emit('getSelectedData', this.selecteddata)
    }
  }
}
</script>

iview 中的select比較醜，修改樣式忽略，很多修改外掛不成功是可能是scoped作用域的問題
使用iview select 的原因在於，它有搜尋功能，多選可以叉調功能，基本可以滿足下拉選單的功能

<i-select
     :model.sync='selecteddata'
     :placeholder='placeholdertext'
     filterable multiple
     @on-change='getselecteddata'
    >

:model.sync='selecteddata' 為選中的option，當為單選的時候是字串或Number，多選時為陣列,需要在data中初始化
placeholder 我們根據外界傳過來的值顯示，預設可以設定為’Select’

  props: {
    placeholder: {
      type: String,
      required: false,
      default: 'Select'
    }
  }

filterable multiple :可搜尋，可多選
@on-change=’getselecteddata’： 這個是得到選中的資料！注意必須寫為on-change才生效，得到的是資料中value的值，如果想要得到label的值，需要在select 新增label-in-value 得到的是陣列物件
我們封裝的select元件可以根據使用者傳入判斷是單選還是多選，加一個判斷引數，預設是單選的。
非同步資料傳輸子元件監聽一下來自父元件資料的變化。
我們得到這個資料需要往父元件中傳遞，父元件得到引數往後臺傳遞

  methods: {
    getselecteddata (value) {
      // console.log(value)
      this.$emit('getSelectedData', value)
    }
  }

value是選中的option構成的陣列

      <i-option
       v-for ='(item, index) in list'
       :value='item.value'
       :key='index'
      >{{item.label}}
      </i-option>

option中迴圈遍歷下拉選單資料，是父元件傳遞過來的

  props: {
    optionlist: Array
  }

歐克，在父元件中使用：

        <select-box
         :optionlist='citylist'
         placeholder='Select City'
         v-on:getdata='getSelectedData'
        ></select-box>

往父元件中傳遞placeholder值和下拉選單的資料

      citylist: [
        {
          value: 'beijing',
          label: '北京市'
        },
        {
          value: 'shanghai',
          label: '上海市'
        },
        {
          value: 'shenzhen',
          label: '深圳市'
        },
        {
          value: 'hangzhou',
          label: '杭州市'
        },
        {
          value: 'nanjing',
          label: '南京市'
        },
        {
          value: 'chongqing',
          label: '重慶市'
        }
      ]

同時，父元件需要接收一個選中的option陣列

  v-on:getdata='getSelectedData'
  ...
  methods: {
    getSelectedData (data) {
      console.log(data)
    }
  }

這樣父元件就得到了子元件的選中的值了