日常开发记录--使用element ui select下拉框多选，编辑状态下回显数据

who am I？ 6666

于 2022-05-24 22:25:00 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 elementui ecmascript

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129253690

本文介绍如何使用 Vue 的 el-select 组件实现一个允许最多选择一个项目的多选框，并展示了相关代码和示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-select
    v-model="value1"
    multiple  // 控制多选的属性
    :multiple-limit="1" // 限制多选的数量 默认0不做限制
    placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.food"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

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

代码效果如下：