Ant Design Vue AutoComplete 查询模式自定义下拉选项内容
Ant Design Vue AutoComplete 查询模式自定义下拉框内容,可以自定义html为下拉内容，样式和布局完全自己控制。
Ant Design 通过slot="dataSource" vue插槽来实现这一自定义功能。
node.js webpack实现查询模式
<template>
<div class="certain-category-search-wrapper" style="width: 400px;padding:0px 30px 0px 30px">
<a-auto-complete
class="certain-category-search"
dropdownClassName="certain-category-search-dropdown"
:dropdownMatchSelectWidth="false"
:dropdownStyle="{width: '300px'}"
size="large"
style="width: 100%"
placeholder="请输入关键词"
optionLabelProp="selectvalue"
>
<template slot="dataSource">
<a-select-opt-group v-for="group in dataSource" :key="group.title">
<span slot="label">
{{group.title}}
<a
style="float: right"
href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com"
target="_blank"
rel="noopener noreferrer"
>更多
</a>
</span>
<a-select-option v-for="opt in group.children" :key="opt.title" :selectvalue="opt.title" :value="opt.title">
{{opt.title}}
<span class="certain-search-item-count">{{opt.count}} 条</span>
</a-select-option>
</a-select-opt-group>
<a-select-option disabled key="all" class="show-all">
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com" target="_blank" rel="noopener noreferrer">
查看所有结果
</a>
</a-select-option>
</template>
<a-input>
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
</a-auto-complete>
</div>
</template>
<script>
//下拉选项数据结构并不特殊要求，按照自己的业务需求实现即可
const dataSource = [
{
title: '商品',
children: [
{
title: 'Iphone 11',
count: 30000,
},
{
title: 'Dell xps',
count: 50000,
},
],
},
{
title: '店铺',
children: [
{
title: 'Apple旗舰店',
count: 60100,
},
{
title: 'DELL旗舰店',
count: 30010,
},
],
},
{
title: '全网',
children: [
{
title: 'www.itxst.com',
count: 100000,
},
],
},
];
export default {
data() {
return {
dataSource,
};
},
};
</script>
<style>
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
color: #666;
font-weight: bold;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
border-bottom: 1px solid #f6f6f6;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
padding-left: 16px;
}
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
text-align: center;
cursor: default;
}
.certain-category-search-dropdown .ant-select-dropdown-menu {
max-height: 300px;
}
</style>
<style scoped>
.certain-category-search-wrapper
>>> .certain-category-search.ant-select-auto-complete
.ant-input-affix-wrapper
.ant-input-suffix {
right: 12px;
}
.certain-category-search-wrapper >>> .certain-search-item-count {
position: absolute;
color: #999;
right: 16px;
}
.certain-category-search-wrapper
>>> .certain-category-search.ant-select-focused
.certain-category-icon {
color: #108ee9;
}
.certain-category-search-wrapper >>> .certain-category-icon {
color: #6e6e6e;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
font-size: 16px;
}
</style>浏览器方式实现查询模式
<!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 AutoComplete 查询模式例子</title>
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
<script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
<link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<style>
body {
padding-top: 10px
}
.ant-select-dropdown-menu{
max-height: 350px;
}
</style>
</head>
<body>
<div id="app">
<div class="certain-category-search-wrapper" style="width: 400px;padding:0px 30px 0px 30px">
<a-auto-complete
class="certain-category-search"
dropdown-className="certain-category-search-dropdown"
:dropdown-match-selectWidth="false"
:dropdown-style="{width: '400px'}"
size="large"
style="width: 100%"
placeholder="请输入关键词"
option-label-prop="selectvalue"
>
<template slot="dataSource">
<a-select-opt-group v-for="group in dataSource" :key="group.title">
<span slot="label">
{{group.title}}
<a
style="float: right"
href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com"
target="_blank"
rel="noopener noreferrer"
>更多
</a>
</span>
<a-select-option v-for="opt in group.children" :key="opt.title" :selectvalue="opt.title" :value="opt.title">
{{opt.title}}
<span class="certain-search-item-count">{{opt.count}} 条</span>
</a-select-option>
</a-select-opt-group>
<a-select-option disabled key="all" class="show-all">
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com" target="_blank" rel="noopener noreferrer">
查看所有结果
</a>
</a-select-option>
</template>
<a-input>
<a-icon slot="suffix" type="search" class="certain-category-icon" />
</a-input>
</a-auto-complete>
</div>
</div>
<script>
const dataSource = [
{
title: '商品',
children: [
{
title: 'Iphone 11',
count: 30000,
},
{
title: 'Dell xps',
count: 50000,
},
],
},
{
title: '店铺',
children: [
{
title: 'Apple旗舰店',
count: 60100,
},
{
title: 'DELL旗舰店',
count: 30010,
},
],
},
{
title: '全网',
children: [
{
title: 'www.itxst.com',
count: 100000,
},
],
},
];
var app = new Vue({
el: '#app',
data() {
return {
dataSource,
};
},
methods: {
search(value) {
},
onSelect(value) {
//选择的数据
console.log('onSelect', value);
}
},
});
</script>
</body>
</html>例子
