Ant Design Vue教程

Ant Design Vue Select 下拉框多选

Ant Design Vue Select 下拉框多选对多个值进行选择非常简单,属性设置成 mode multiple 就可以。

完整代码

<template>
  <a-select
    mode="multiple"
    :default-value="['a1', 'b2']"
    style="width: 80%"
    placeholder="请选择"
    @change="onChange"
  >
    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
      {{ (i + 9).toString(36) + i }}
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  methods: {
    //选中后的值
    onChange(value) {
      console.log('你选择了:'+value);
    },
  },
};
</script>

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Select 下拉框用法 Select 下拉框联动 Select 下拉框多选 Select 下拉框分组 Select 搜索框 Select 属性和事件 Slider 滑动输入条 Switch 开关