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

来源：互联网发布：方维o2o 6.0 源码编辑：程序博客网时间：2024/06/03 14:02

之前讲过饿了么表单的应用，今天来说说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>

阅读全文

0 0