Ant Design Vue Select 下拉框用法

Select下拉框用法是前端业务开发中基础组件，任何一个系统都会用到这个组件，html原生的组件功能简单外观丑陋，Ant Design Select对原生下拉框进行了功能拓展和美化，几乎能满足你所有的要求。

Select标签

<a-select default-value="itxst" style="width: 150px" >
  <a-select-option value="itxst">Select组件</a-select-option>
</a-select>

基础用法

<template>
  <div>
    <a-select default-value="www.microsoft.com" style="width: 120px" @change="handleChange">
      <a-select-option
        :value="item.value"
        :disabled="item.disabled"
        v-for="item in options"
        :key="item.value"
      >{{item.label}}</a-select-option>
    </a-select>
    <a-select default-value="itxst" style="width: 150px" disabled>
      <a-select-option value="itxst">禁用Select组件</a-select-option>
    </a-select>
    <a-select default-value="itxst" style="width: 120px" loading>
      <a-select-option value="itxst">加载中效果</a-select-option>
    </a-select>
  </div>
</template>
<script>
//下拉框数据结构
var options = [
  { label: "微软", value: "www.microsoft.com", disabled: false },
  { label: "百度(禁止选择)", value: "www.baidu.com", disabled: true },
  { label: "谷歌", value: "www.google.com", disabled: false },
  { label: "IT小书童", value: "www.itxst.com", disabled: false }
];
export default {
  data() {
    return {
      options: options
    };
  },
  methods: {
    handleChange(value) {
      console.log("你选择了:" + value);
    }
  }
};
</script>

例子

标签模式

把模式设置成mode="tags"

<a-select placeholder="标签模式" mode="tags"></a-select>

完整代码

<template>
  <div>
    <a-select placeholder="标签模式" mode="tags"  style="width: 220px" @change="handleChange">
      <a-select-option
        :value="item.value"
        :disabled="item.disabled"
        v-for="item in options"
        :key="item.value"
      >{{item.label}}</a-select-option>
    </a-select> 
  </div>
</template>
<script>
//下拉框数据结构
var options = [
  { label: "微软", value: "www.microsoft.com", disabled: false },
  { label: "谷歌(禁止选择)", value: "www.google.com", disabled: true },
  { label: "IT小书童", value: "www.itxst.com", disabled: false }
];
export default {
  data() {
    return {
      options: options
    };
  },
  methods: {
   //获取选中项
    handleChange(value) {
      console.log("你选择了:" + value);
    }
  }
};
</script>

例子

获取选中项

默认情况下我们可以通过change事件获取下拉框的value值，ant design提供了label-in-value属性获取选中对象。

<template>
  <div>
    <a-select placeholder="标签模式" mode="tags" 
     label-in-value style="width: 220px"
      @change="handleChange">
      <a-select-option
        :value="item.value"
        :disabled="item.disabled"
        v-for="item in options"
        :key="item.value"
      >{{item.label}}</a-select-option>
    </a-select> 
  </div>
</template>
<script>
//下拉框数据结构
var options = [
  { label: "微软", value: "www.microsoft.com", disabled: false },
  { label: "谷歌(禁止选择)", value: "www.google.com", disabled: true },
  { label: "IT小书童", value: "www.itxst.com", disabled: false }
];
export default {
  data() {
    return {
      options: options
    };
  },
  methods: {
    //获取选择对象
    handleChange(items) {   
      //如果是mode='tag''multiple'模式 items是数字，否则是对象  items.key
      alert("你选择了:" + items[0].key+" ; "+items[0].label);
    }
  }
};
</script>

隐藏已选项

实现思路：提供计算属性刷选掉已选项,tag模式不支持

<template>
  <div>
    <a-select placeholder="标签模式" mode="multiple"  
    style="width: 220px" @change="handleChange">
      <a-select-option
        :value="item.value"
        :disabled="item.disabled"
        v-for="item in filteredOptions"
        :key="item.value"
      >{{item.label}}</a-select-option>
    </a-select> 
  </div>
</template>
<script>
//下拉框数据结构
var options = [
  { label: "微软", value: "www.microsoft.com", disabled: false },
  { label: "谷歌(禁止选择)", value: "www.google.com", disabled: true },
  { label: "IT小书童", value: "www.itxst.com", disabled: false }
];
export default {
  data() {
    return {
      selectedItems:[],//选中对象
      options: options
    };
  },
  computed: {
    filteredOptions() {
     var that=this;
      var  arr=[];
      that.options.forEach(a=>{
         var isExist=false;
         that.selectedItems.forEach(m=>{ 
          if(a.value==m) isExist=true;
        });
        if(isExist==false) arr.push(a);
      });
      return arr;
    },
  },
  methods: {
    //获取选择对象
    handleChange(items) {   
      this.selectedItems=items; 
    }
  }
};
</script>

例子