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

本文主要是介绍日常开发记录--使用element ui 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>

代码效果如下：

这篇关于日常开发记录--使用element ui select下拉框多选，编辑状态下回显数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！