el-select 多选框使用 以及回显默认选中说明
<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>
根据官方的案例看出 value label 描述的值是一样的,想问为什么是一样的。有没有坑,这个按照官方的写法来实现就好
本文只讲一个事件
change 选中值发生变化时触发 目前的选中值
label :是展示在输入框的值,
value:是@change 事件中选中的值 多选后是数组字符串形式
你的业务处理在change 事件中处理即可
el-select 多选回显怎么办?
按照官方文档的写法
label :是展示在输入框的值,
value:是@change 事件中选中的值 多选后是数组字符串形式
你只要把 value 的值跟 label 的值一样即可
v-model="value" 这个value 就是展示的 你只要把回显是数组给到value 即可但是这个value一定是你数据中 value 的值 这样回显的数据才会默认选中
v-model="value" 这个value 是自己定义的 你可以换做其他的命名也可以的
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
v-model="value"
代码中的value 是一样的值 回显的数据才会默认选中