關於餓了麼ui框架的使用之select的應用

之前講過餓了麼表單的應用，今天來說說select選擇器的應用。

 <el-select v-model="value" placeholder="請選擇">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

Option Attributes

value：選項的值，string/number/object類型；
label：選項的標籤，若不設置則默認與 value 相同，string/number類型；
disabled：是否禁用該選項，boolean類型，默認爲false；

 data() {
      return {
        options: [{
          value: '11111',
          label: '吃飯'
        }, {
          value: '22222',
          label: '睡覺'
        }, {
          value: '33333',
          label: '打農藥'
        }, {
          value: '44444',
          label: '游泳'
        }, {
          value: '55555',
          label: '逛街'
        }],
        value: ''
      }
    }

Select Events

change: 選中值發生變化時觸發 ，回調參數是目前的選中值

<el-select v-model="value" placeholder="日常活動" @change="changed">

</el-select>

    methods: {
      changed() {
        let me = this;
        console.log(me.value);
      }
    }

在線查看請猛戳猛戳猛戳

visible-change: 下拉框出現/隱藏時觸發，回調參數出現則爲 true，隱藏則爲 false;
remove-tag：多選模式下移除tag時觸發，回調參數是移除的tag值；
clear： 可清空的單選模式下用戶點擊清空按鈕時觸發

Select Attributes

filterable： 是否可搜索 boolean類型 默認爲false；

<el-select v-model="value8" filterable placeholder="請選擇">
</el-select>

allow-create 是否允許用戶創建新條目，需配合 filterable 使用，boolean類型，默認爲false；

 <el-select
    v-model="value10"
    multiple
    filterable
    allow-create
    placeholder="請選擇文章標籤">
 </el-select>