ant design vue a-cascader实现可搜索全选

### 如何在 Ant Design Vue 的 A-Cascader 中实现可搜索和全选功能 #### 可搜索功能 A-Cascader 组件本身已经内置了 `show-search` 属性来启用搜索功能。通过设置该属性并配合自定义的过滤逻辑，可以轻松实现级联选择器中的搜索能力。 以下是具体实现方法： - 设置 `show-search` 为 true 来开启搜索功能。 - 使用 `options` 配置项指定数据源，并确保选项对象具有 `value`, `label` 和子节点数组 `children`。 - 如果需要更复杂的匹配规则，可以通过 `filterOption` 自定义过滤函数[^1]。 ```vue <template> <a-cascader :options="options" v-model:value="selectedValue" show-search :filter-option="customFilterOption" /> </template> <script> export default { data() { return { selectedValue: [], options: [ { value: 'zhejiang', label: 'Zhejiang', children: [...] }, ... ] }; }, methods: { customFilterOption(input, option) { // 自定义过滤逻辑 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; } } }; </script> ``` --- #### 全选功能 Cascader 并未直接提供全选的功能接口，因此需要借助外部状态管理以及事件监听机制手动实现此功能。以下是具体的解决方案： 1. **初始化默认值** 利用 Cascader 的 `v-model:value` 或者 `defaultValue` 属性绑定初始值列表。如果希望加载页面时即显示全部选项被选中，则需提前计算好对应的路径集合。 2. **动态更新选中状态** 结合 `change` 事件回调处理用户交互行为；当检测到触发特定条件（如点击按钮执行全选操作），重新赋值给绑定变量即可完成刷新视图的效果。 3. **辅助工具函数** 编写递归算法遍历整个树结构提取所有叶子节点作为最终返回的结果集。 ```javascript function getAllLeafNodes(options) { const result = []; function traverse(nodes) { nodes.forEach(node => { if (!node.children || !Array.isArray(node.children)) { result.push([node.value]); // 单层路径形式存储 } else { traverse(node.children); } }); } traverse(options); return result; } ``` 随后调用上述方法获取完整的叶子节点路径用于填充至 cascader 控件内部的状态之中[^2]。 --- ### 完整示例代码 下面是一个综合案例展示如何同时满足「可搜索」与「全选」需求： ```vue <template> <div> <button @click="selectAll">Select All</button> <a-cascader :options="options" v-model:value="selectedValues" show-search change-on-select :field-names="{ label: 'name', value: 'id' }" /> </div> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const options = [ { id: '1', name: 'Parent 1', children: [{ id: '1-1', name: 'Child 1-1' }] }, { id: '2', name: 'Parent 2', children: [] } ]; const selectedValues = ref([]); const selectAll = () => { const allLeaves = getAllLeafNodes(options).map(path => path.join('/')); selectedValues.value = allLeaves.map(leafPath => leafPath.split('/')); // 转换回二维数组格式 }; function getAllLeafNodes(opts) { let results = []; opts.forEach(opt => { if (opt.children && opt.children.length > 0) { results = [...results, ...getAllLeafNodes(opt.children)]; } else { results.push([opt.id]); } }); return results; } return { options, selectedValues, selectAll }; } }); </script> ``` ---