antdv API地址:
https://www.antdv.com/components/cascader-cn/#API
上代码
template
<template>
<a-cascader :options="options" :showSearch="showSearch" />
</template>
script
import { fullText } from '@/utils'
...
data() {
return {
option: [{
value: 'zhejiang',
label: '浙江省',
children: [
{
value: 'hangzhou',
label: '杭州市',
children: [
{
value: 'xihu',
label: '西湖区',
},
],
},
],
},
{
value: 'shanghai',
label: '上海市',
children: [
{
value: 'qingpuqu',
label: '青浦区',
children: [
{
value: 'beijinglu',
label: '北京路',
},
],
},
],
},
],
showSearch: {
filter: (inputValue, path) => {
return path.some(option => {
// label搜索
return fullText(inputValue, option.label);
}
)
},
matchInputWidth: true
}
}
}
/src/utils/index.js
const fullText = function (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;
}
export { fullText }