Select下拉框用法是前端业务开发中基础组件,任何一个系统都会用到这个组件,html原生的组件功能简单外观丑陋,Ant Design Select对原生下拉框进行了功能拓展和美化,几乎能满足你所有的要求。
<a-select default-value="itxst" style="width: 150px" >
<a-select-option value="itxst">Select组件</a-select-option>
</a-select>
copy
<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>
copy
把模式设置成mode="tags"
<a-select placeholder="标签模式" mode="tags"></a-select>
copy
完整代码
<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>
copy
默认情况下我们可以通过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>
copy
实现思路:提供计算属性刷选掉已选项,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>
copy