Ant Design Vue教程
Ant Design Vue Cascader showSearch搜索筛选
showSearch方法可以对联级数据选项继续搜索筛选，此场景一般是用户对数据比较属性的情况下通过搜索快速筛选出想要的结果。
1，目前只支持客户端搜索
2，本文演示的是模糊搜索，如果需要客户端全文搜索可以查找lunr.js相关资料
在线例子
例子
node.js webpack方式
<template>
<a-cascader
:options="options"
:showSearch="{filter}"
@change="onChange"
placeholder="输入shang试试看"
style="width:330px"
/>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 'zhejiang',
label: '浙江省',
children: [
{
value: 'hangzhou',
label: '杭州市',
children: [
{
value: 'xihu',
label: '西湖区',
},
],
},
],
},
{
value: 'shanghai',
label: '上海市',
children: [
{
value: 'qingpuqu',
label: '青浦区',
children: [
{
value: 'beijinglu',
label: '北京路',
},
],
},
],
},
],
};
},
methods: {
onChange(value, selectedOptions) {
console.log(value, selectedOptions);
},
filter(inputValue, path) {
var that=this;
return path.some(option=>{
//value搜索
return that.fullText(inputValue.toLowerCase(), option.value.toLowerCase());
//label搜索
//return that.fullText(inputValue.toLowerCase(), option.label.toLowerCase());
}
);
},
//模糊搜索
fullText(keyword, text) {
var hlen = text.length;
var nlen = keyword.length;
if (nlen > hlen) {
return false;
}
if (nlen === hlen) {
return keyword === text;
}
outer: for (var i = 0, j = 0; i < nlen; i++) {
var nch = keyword.charCodeAt(i);
while (j < hlen) {
if (text.charCodeAt(j++) === nch) {
continue outer;
}
}
return false;
}
return true;
}
},
};
</script>浏览器方式
<!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 Cascader 搜索例子</title>
<script src="https://www.itxst.com/package/vue/vue.min.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" />
<!--需要引入vue-dash-event插件-->
<script src="https://www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>
<!--国际化-->
<script src="https://www.itxst.com/package/ant-design-vue/antd-with-locales.min.js"> </script>
<style>
body {
padding-top: 10px
}
.ant-pagination-item-link.red {
color: red;
padding-left: 6px;
padding-right: 6px;
}
</style>
</head>
<body>
<div id="app">
<a-locale-provider :locale="locales.zh_CN">
<a-cascader :options="options" @change="onChange" :show-search="{filter}" placeholder="请选择省市区"
style="width: 100%" ></a-cascader>
</a-locale-provider>
</div>
<script>
//本地化
const { LocaleProvider, locales } = window.antd;
//vue-dash-event插件
Vue.use(window['vue-dash-event']);
var app = new Vue({
el: '#app',
data() {
return {
options: [
{
value: 'zhejiang',
label: '浙江省',
children: [
{
value: 'hangzhou',
label: '杭州市',
children: [
{
value: 'xihu',
label: '西湖区',
},
],
},
],
},
{
value: 'shanghai',
label: '上海市',
children: [
{
value: 'qingpuqu',
label: '青浦区',
children: [
{
value: 'beijinglu',
label: '北京路',
},
],
},
],
},
],
};
},
methods: {
onChange(value) {
console.log(value);
},
filter(inputValue, path) {
return path.some(
option => {
console.log(option);
//通过value搜索
return option.value.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
//通过label搜索
//return option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
}
);
},
},
});
</script>
</body>
</html>