v-select的多项默认选中的问题

v-select的多项默认选中的问题

由于在项目中遇到的问题,需要select的默认选择多项,在网上找了很多,没有满意的,所以自己研究了一下。

直接上代码

<template>
  <el-select v-model="value1" ref="select" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
        value2: []
      }
    },
    
    mounted(){
   		this.$refs.select.value=['选项5', '选项4']; //[] 里面是要选择的value值,如选项5
   		// 这样页面在加载的时候,select会默认选择北京烤鸭和龙须面
    }
  }
</script>

注意 :上面的mounted不能使用created

在Ant Design Vue的`a-select`组件中,如果需要支持一次选择多个含有联想词(通常指自动补全选项)的选项,你需要结合`a-menu`和`a-input`等组件一起使用,因为`a-select`本身默认并不支持多选。 首先,在`a-select`里配置一个`filterOption`属性,用于控制是否开启搜索功能,然后配合一个`a-menu`组件作为下拉菜单来显示联想词。 ```html <template> <div> <a-input v-model="searchText" placeholder="输入关键词搜索"></a-input> <a-select multiple filterOption="remote" ref="select"> <a-menu slot="overlay" :options="filteredOptions" /> </a-select> </div> </template> <script> import { remoteFilter } from '@ant-design/icons'; // 引入远程搜索图标 export default { data() { return { searchText: '', filteredOptions: [], }; }, computed: { async filteredOptions() { const response = await yourRemoteSearchApi({ searchText }); // 模拟远程搜索API // 对返回的数据处理,将关联词转换成可选项 return response.map(item => ({ value: item.id, // 你的主键字段 label: item.name, icon: remoteFilter, })); }, }, methods: { onMenuSelect(option) { // 当用户点击菜单项时,将值添加到选中的选项中 this.$ref.select.$model.push(option.value); }, }, }; </script> ``` 在这个例子中,当用户在`a-input`中输入关键词,`filterOption`的`remote`属性会触发远程搜索,并将结果显示在`a-menu`中。当用户点击菜单中的选项时,`onMenuSelect`方法会被调用,把对应的值添加到`a-select`的多选模式中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值