antdv 级联选择（Cascader）组件实现模糊搜索

antdv API地址及代码示例

最新推荐文章于 2025-11-26 15:40:52 发布

转载最新推荐文章于 2025-11-26 15:40:52 发布 · 3.5k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.itxst.com/ant-design-vue/7zeunaub.html

文章标签：

#vue #python #javascript

Vue.js 专栏收录该内容

6 篇文章

订阅专栏

博客提供了antdv API的地址https://www.antdv.com/components/cascader-cn/#API ，还提及了代码相关内容，包括template、script以及/src/utils/index.js 。

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  }