Commit 3ee74b29 authored by Leopoldthecoder's avatar Leopoldthecoder

Select: fix minor bugs

parent 2d07391d
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
value: 'Guangzhou', value: 'Guangzhou',
label: '广州' label: '广州'
}], }],
value: '选项2', value: '',
value2: '', value2: '',
value3: '', value3: '',
value4: '', value4: '',
...@@ -108,20 +108,9 @@ ...@@ -108,20 +108,9 @@
mounted() { mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; }); this.list = this.states.map(item => { return { value: item, label: item }; });
// this.options4 = this.states.map(item => { return { value: item, label: item }; });
// this.value9 = ['Vermont'];
}, },
methods: { methods: {
empty() {
this.value9 = ['New York'];
},
aa(val) {
console.log('change', val)
},
bb() {
this.options.splice(0, 1, { label: 'haha', value: 'haha' });
},
remoteMethod(query) { remoteMethod(query) {
if (query !== '') { if (query !== '') {
this.loading = true; this.loading = true;
...@@ -151,11 +140,10 @@ ...@@ -151,11 +140,10 @@
### 基础用法 ### 基础用法
适用广泛的基础单选 适用广泛的基础单选
<el-button @click="bb">bb</el-button>
:::demo `v-model`的值为当前被选中的`el-option`的 value 属性值 :::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
```html ```html
<template> <template>
<el-select v-model="value" placeholder="请选择" @change="aa"> <el-select v-model="value" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
...@@ -521,7 +509,6 @@ ...@@ -521,7 +509,6 @@
### 远程搜索 ### 远程搜索
从服务器搜索数据,输入关键字进行查找 从服务器搜索数据,输入关键字进行查找
<el-button @click="empty">aa</el-button>
:::demo 为了启用远程搜索,需要将`filterable``remote`设置为`true`,同时传入一个`remote-method``remote-method`为一个`Function`,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果`el-option`是通过`v-for`指令渲染出来的,此时需要为`el-option`添加`key`属性,且其值需具有唯一性,比如此例中的`item.value` :::demo 为了启用远程搜索,需要将`filterable``remote`设置为`true`,同时传入一个`remote-method``remote-method`为一个`Function`,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果`el-option`是通过`v-for`指令渲染出来的,此时需要为`el-option`添加`key`属性,且其值需具有唯一性,比如此例中的`item.value`
```html ```html
<template> <template>
...@@ -529,7 +516,6 @@ ...@@ -529,7 +516,6 @@
v-model="value9" v-model="value9"
multiple multiple
filterable filterable
allow-create
remote remote
placeholder="请输入关键词" placeholder="请输入关键词"
:remote-method="remoteMethod" :remote-method="remoteMethod"
......
...@@ -257,6 +257,7 @@ ...@@ -257,6 +257,7 @@
this.$refs.input.blur(); this.$refs.input.blur();
} }
this.query = ''; this.query = '';
this.selectedLabel = '';
this.resetHoverIndex(); this.resetHoverIndex();
if (!this.multiple) { if (!this.multiple) {
this.getOverflows(); this.getOverflows();
...@@ -287,8 +288,6 @@ ...@@ -287,8 +288,6 @@
options(val) { options(val) {
this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length; this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length;
// 下面这行先去掉,因为 remote !multiple 时会有问题
// this.selected = this.getSelected();
if (this.multiple) { if (this.multiple) {
this.resetInputHeight(); this.resetInputHeight();
} }
...@@ -577,6 +576,9 @@ ...@@ -577,6 +576,9 @@
}, },
mounted() { mounted() {
if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
this.currentPlaceholder = '';
}
addResizeListener(this.$el, this.resetInputWidth); addResizeListener(this.$el, this.resetInputWidth);
this.selected = this.getSelected(); this.selected = this.getSelected();
if (this.remote && this.multiple) { if (this.remote && this.multiple) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment