a2821608686a 2024-10-09 21:59 采纳率: 50%
浏览 28
已结题

怎么让el-select允许多选的情况下能够动态添加结果?

希望调用addSelected函数时能够插入一条新数据到selected中。输入框显示烤地瓜,selected也能够获取烤地瓜的value值也就是6


<template>
  <div>
    <el-select v-model="selected" multiple placeholder="请选择" ref="nselect">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-button @click="addSelected">添加新选项</el-button>
    <el-button @click="getData">获取数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      options: [
        { value: '1', label: '黄金糕' },
        { value: '2', label: '双皮奶' },
        { value: '3', label: '蚵仔煎' },
        { value: '4', label: '龙须面' },
        { value: '5', label: '北京烤鸭' }
      ]
    };
  },
  methods: {
    addSelected() {
      const newData = { value: '6', label: '烤地瓜' };
    },
    getData(){
      console.log(this.selected)      
    }
  }
};
</script>
  • 写回答

1条回答 默认 最新

  • 一轮明月照丘壑 2024-10-09 22:00
    关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    要实现这个功能,你需要在 addSelected 方法中将新的数据项添加到 selected 数组中,并且需要将这个新的数据项也添加到 options 数组中,以便在 <el-select> 组件的下拉列表中也显示这个新选项。同时,由于 v-model 是双向绑定的,当 selected 数组变化时,选中的选项也会自动更新。下面是修改后的代码:

    <template>
      <div>
        <el-select v-model="selected" multiple placeholder="请选择" ref="nselect">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button @click="addSelected">添加新选项</el-button>
        <el-button @click="getData">获取数据</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          selected: [],
          options: [
            { value: '1', label: '黄金糕' },
            { value: '2', label: '双皮奶' },
            { value: '3', label: '蚵仔煎' },
            { value: '4', label: '龙须面' },
            { value: '5', label: '北京烤鸭' }
          ]
        };
      },
      methods: {
        addSelected() {
          const newData = { value: '6', label: '烤地瓜' };
          // 将新数据添加到 selected 数组中
          this.selected.push(newData.value);
          // 将新数据添加到 options 数组中
          this.options.push(newData);
        },
        getData(){
          console.log(this.selected)      
        }
      }
    };
    </script>
    

    现在当你点击 "添加新选项" 按钮时,新的选项 "烤地瓜"(value值为6)将会被添加到 <el-select> 组件的下拉列表中,并且也会被添加到 selected 数组中,从而在下拉列表中显示为一个选中的选项。当你点击 "获取数据" 按钮时,控制台将打印出 selected 数组的内容,包括新添加的选项 "烤地瓜"。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 10月9日