Skip to content

Commit

Permalink
fix: ElTag不能响应数据变化
Browse files Browse the repository at this point in the history
  • Loading branch information
@yt0379
yt0379 committed Sep 9, 2020
1 parent 3f1e95b commit c9380a3
Show file tree
Hide file tree
Showing 2 changed files with 241 additions and 33 deletions.
218 changes: 218 additions & 0 deletions examples/docs/zh-CN/select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,224 @@
```
:::

### 自定义模板

可以自定义备选项

:::demo 将自定义的 HTML 模板插入`el-option`的 slot 中即可。
```html
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
cities: [{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}],
value: ''
}
}
}
</script>
```
:::

### 可搜索

可以利用搜索功能快速查找选项

:::demo 为`el-select`添加`filterable`属性即可启用搜索功能。默认情况下，Select 会找出所有`label`属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个`filter-method`来实现。`filter-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。
```html
<template>
<el-select v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
```
:::

### 远程搜索

从服务器搜索数据，输入关键字进行查找
:::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
```html
<template>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
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 = [];
}
}
}
}
</script>
```
:::

### 创建条目
可以创建并选中选项中不存在的条目
:::demo 使用`allow-create`属性即可通过在输入框中输入文字来创建新的条目。注意此时`filterable`必须为真。本例还使用了`default-first-option`属性，在该属性打开的情况下，按下回车就可以选中当前选项列表中的第一个选项，无需使用鼠标或键盘方向键进行定位。
```html
<template>
<el-select
v-model="value"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章标签">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>

<script>
export default {
data() {
return {
options: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
value: []
}
}
}
</script>
```
:::

:::tip
如果 Select 的绑定值为对象类型，请务必指定 `value-key` 作为它的唯一性标识。
:::

### Select Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
Expand Down
56 changes: 23 additions & 33 deletions packages/tag/Tag.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,8 @@ export default {
}
},
setup(props, { emit, slots }) {
const {
type,
hit,
effect,
color,
closable,
disableTransitions,
size
} = props
const tagSize = computed(() => {
return size || (getCurrentInstance().proxy.$ELEMENT || {}).size
return props.size || (getCurrentInstance().proxy.$ELEMENT || {}).size
})
const handleClose = (event) => {
event.stopPropagation()
Expand All @@ -39,32 +29,32 @@ export default {
const handleClick = (event) => {
emit('click', event)
}
const classes = [
'el-tag',
type ? `el-tag--${type}` : '',
tagSize.value ? `el-tag--${tagSize.value}` : '',
effect ? `el-tag--${effect}` : '',
hit && 'is-hit'
]
const tagEl = (
<span
class={classes}
style={{ backgroundColor: color }}
onClick={handleClick}
>
{slots.default && slots.default()}
{closable && (
<i class="el-tag__close el-icon-close" onClick={handleClose}></i>
)}
</span>
)
return () =>
disableTransitions ? (
return () => {
const classes = [
'el-tag',
props.type ? `el-tag--${props.type}` : '',
tagSize ? `el-tag--${tagSize}` : '',
props.effect ? `el-tag--${props.effect}` : '',
props.hit && 'is-hit'
]
const tagEl = (
<span
class={classes}
style={{ backgroundColor: props.color }}
onClick={handleClick}
>
{slots.default && slots.default()}
{props.closable && (
<i class="el-tag__close el-icon-close" onClick={handleClose}></i>
)}
</span>
)
return props.disableTransitions ? (
tagEl
) : (
<Transition name="el-zoom-in-center">{tagEl}</Transition>
)
}
}
}
</script>

0 comments on commit c9380a3

Please sign in to comment.