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  是一样的值 回显的数据才会默认选中
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐