vue2.0 ant design vue 中组件Cascader 搜索和后台数据进行模糊查询

vue2.0 ant design vue 中组件Cascader 搜索和后台数据进行模糊查询

Cascader组件代码

<a-cascader
   v-else-if="col === 'softName'"
   v-model:value="value"
   :options="treeData"
   :show-search="{ filter }"
   placeholder="请选择"
   :fieldNames="{ label: 'title', value: 'value', children: 'children' }"
   :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
   :display-render="displayRender"
   @change="onChangeSelect($event, record.key, col)"
   v-model="record.echoTbSoft"
 />

掉坑 :fieldNames=“{ label: ‘title’, value: ‘value’, children: ‘children’ }”
title可以用text也可以不用，取决于return返回值中option.title还是option.text，我用text会报错，则采用title，成功返回正确的值。

methods: {
filter(inputValue, path) {
      return path.some(option => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
}

官方文档更为详细，此文章仅为个人见解，希望对你有所帮助