其他分享
首页 > 其他分享> > 日常开发记录--使用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>

代码效果如下:

 

标签:龙须面,--,双皮奶,下拉框,food,北京烤鸭,element,id
来源: https://www.cnblogs.com/huguo/p/16307459.html