关于饿了么ui框架的使用之select的应用

之前讲过饿了么表单的应用，今天来说说select选择器的应用。

 select v-model="value" placeholder="请选择">
    option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    option>
  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>