Ant Design Vue教程
Ant Design Vue Select 下拉框分组
Ant Design Vue Select 分组用法，当选择项比较多时我们可以对下拉选项进行分组，这样用户可以更清晰的选择选项。
主要的标签
//a-select-opt-group标签来分隔a-select-option选项
//代码例子
<a-select>
<a-select-opt-group label="国外">
<a-select-option value="yahoo">
yahoo.com
</a-select-option>
</a-select-opt-group>
</a-select>Webpack方式完整例子
<template>
<a-select default-value="itxst" style="width: 200px" @change="onChange">
<a-select-opt-group>
<span slot="label"><a-icon type="user" />国内</span>
<a-select-option value="itxst">
itxst.com
</a-select-option>
<a-select-option value="qq">
qq.com
</a-select-option>
</a-select-opt-group>
<a-select-opt-group label="国外">
<a-select-option value="yahoo">
yahoo.com
</a-select-option>
<a-select-option value="google">
google.com
</a-select-option>
</a-select-opt-group>
</a-select>
</template>
<script>
export default {
methods: {
onChange(value) {
alert('你选择了：'+value);
},
},
};
</script>Html & JS方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Ant Design Vue Select 下拉框分组例子</title>
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ant-design-vue/antd.js"></script>
<link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<style>
body {
padding: 10px
}
</style>
</head>
<body>
<div id="app">
<a-select default-value="itxst" style="width: 200px" @change="onChange">
<a-select-opt-group>
<span slot="label"><a-icon type="user"></a-icon>国内</span>
<a-select-option value="itxst">
itxst.com
</a-select-option>
<a-select-option value="qq">
qq.com
</a-select-option>
</a-select-opt-group>
<a-select-opt-group label="国外">
<a-select-option value="yahoo">
yahoo.com
</a-select-option>
<a-select-option value="google">
google.com
</a-select-option>
</a-select-opt-group>
</a-select>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
onChange(value) {
alert('你选择了：'+value);
},
},
});
</script>
</body>
</html>例子