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

最新推荐文章于 2024-04-21 02:04:10 发布

原创最新推荐文章于 2024-04-21 02:04:10 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui #ecmascript

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

<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>

代码效果如下：