antdv 级联选择(Cascader)组件实现模糊搜索

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  }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant级联选择器(Cascader)组件提供了异步加载数据的功能,可以用于无限层级的地区选择。以下是一个示例代码: ``` <template> <van-cascader :options="options" :load-data="loadData" v-model="value" :placeholder="'请选择地区'" :columns="3" /> </template> <script> export default { data() { return { value: [], options: [ { text: '省份', value: 'province', children: [], }, { text: '城市', value: 'city', children: [], }, { text: '区县', value: 'district', children: [], }, ], }; }, methods: { async loadData(item) { const data = await this.getAreaData(item.value); item.children = data; }, async getAreaData(value) { // 根据 value 获取对应的数据 // 这里可以通过异步请求获取数据 // 返回一个 Promise }, }, }; </script> ``` 以上代码中,`options` 数组是级联选择器的选项列表,其中每个选项都有 `text`、`value` 和 `children` 三个属性。`text` 和 `value` 表示选项的显示文本和值,`children` 是一个空数组,用于存放子选项。 `loadData` 方法是级联选择器异步加载数据的回调函数,它接收一个 `item` 参数,表示当前选中的选项。在该方法中,可以根据当前选项的值通过异步请求获取子选项数据,并将数据赋值给 `item.children` 属性。这样,在用户选择当前选项时,就会自动触发加载子选项的操作。 在实际使用中,需要根据具体的业务需求调整代码,例如修改选项显示文本、修改异步请求的参数等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值