广州网站建设商城建设,网站策划主题,南京seo公司教程,浏览器打开网站404当选项过多时#xff0c;使用下拉菜单展示并选择内容。 1.如何使用#xff1f;基础单选
v-model的值为当前被选中的el-option的 value 属性值
templateel-select v-modelvalue placeholder请选择el-optionv-foritem in … 当选项过多时使用下拉菜单展示并选择内容。 1.如何使用基础单选
v-model的值为当前被选中的el-option的 value 属性值
templateel-select v-modelvalue placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script
2.禁用选项
在el-option中设定disabled值为 true即可禁用该选项
templateel-select v-modelvalue placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabled/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶,disabled: true}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script3.禁用状态
选择器不可用状态
为el-select设置disabled属性则整个选择器不可用
templateel-select v-modelvalue disabled placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, ],value: }}}
/script
4.可清空单选
包含清空按钮可将选择器清空为初始状态
为el-select设置clearable属性则可将选择器清空。需要注意的是clearable属性仅适用于单选。
templateel-select v-modelvalue clearable placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script5.基础多选
适用性较广的基础多选用 Tag 展示已选项
为el-select设置multiple属性即可启用多选此时v-model的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现你也可以设置collapse-tags属性将它们合并为一段文字。
templateel-select v-modelvalue1 multiple placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-selectv-modelvalue2multiplecollapse-tagsstylemargin-left: 20px;placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value1: [],value2: []}}}
/script6.自定义模板
可以自定义备选项
将自定义的 HTML 模板插入el-option的 slot 中即可。
templateel-select v-modelvalue placeholder请选择el-optionv-foritem in cities:keyitem.value:labelitem.label:valueitem.valuespan stylefloat: left{{ item.label }}/spanspan stylefloat: right; color: #8492a6; font-size: 13px{{ item.value }}/span/el-option/el-select
/templatescriptexport default {data() {return {cities: [{value: Beijing,label: 北京}, {value: Shanghai,label: 上海}, {value: Nanjing,label: 南京}, {value: Chengdu,label: 成都}, {value: Shenzhen,label: 深圳}, {value: Guangzhou,label: 广州}],value: }}}
/script
7.分组
备选项进行分组展示
使用el-option-group对备选项进行分组它的label属性为分组名
templateel-select v-modelvalue placeholder请选择el-option-groupv-forgroup in options:keygroup.label:labelgroup.labelel-optionv-foritem in group.options:keyitem.value:labelitem.label:valueitem.value/el-option/el-option-group/el-select
/templatescriptexport default {data() {return {options: [{label: 热门城市,options: [{value: Shanghai,label: 上海}, {value: Beijing,label: 北京}]}, {label: 城市名,options: [{value: Chengdu,label: 成都}, {value: Shenzhen,label: 深圳}, {value: Guangzhou,label: 广州}, {value: Dalian,label: 大连}]}],value: }}}
/script
8.可搜索
可以利用搜索功能快速查找选项 为el-select添加filterable属性即可启用搜索功能。默认情况下Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑可以通过传入一个filter-method来实现。filter-method为一个Function它会在输入值发生变化时调用参数为当前输入值。 templateel-select v-modelvalue filterable placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: }}}
/script
9.远程搜索
从服务器搜索数据输入关键字进行查找 为了启用远程搜索需要将filterable和remote设置为true同时传入一个remote-method。remote-method为一个Function它会在输入值发生变化时调用参数为当前输入值。需要注意的是如果el-option是通过v-for指令渲染出来的此时需要为el-option添加key属性且其值需具有唯一性比如此例中的item.value。 templateel-selectv-modelvaluemultiplefilterableremotereserve-keywordplaceholder请输入关键词:remote-methodremoteMethod:loadingloadingel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [],value: [],list: [],loading: false,states: [Alabama, Alaska, Arizona,Arkansas, California, Colorado,Connecticut, Delaware, Florida,Georgia, ]}},mounted() {this.list this.states.map(item {return { value: value:${item}, label: label:${item} };});},methods: {remoteMethod(query) {if (query ! ) {this.loading true;setTimeout(() {this.loading false;this.options this.list.filter(item {return item.label.toLowerCase().indexOf(query.toLowerCase()) -1;});}, 200);} else {this.options [];}}}}
/script10.创建条目
可以创建并选中选项中不存在的条目 使用allow-create属性即可通过在输入框中输入文字来创建新的条目。注意此时filterable必须为真。本例还使用了default-first-option属性在该属性打开的情况下按下回车就可以选中当前选项列表中的第一个选项无需使用鼠标或键盘方向键进行定位。 templateel-selectv-modelvaluemultiplefilterableallow-createdefault-first-optionplaceholder请选择文章标签el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select
/templatescriptexport default {data() {return {options: [{value: HTML,label: HTML}, {value: CSS,label: CSS}, {value: JavaScript,label: JavaScript}],value: []}}}
/script如果 Select 的绑定值为对象类型请务必指定 value-key 作为它的唯一性标识。
