vue2下antd组件a-tree-select树形选择器treeNodeFilterProp切换title值查询

在 Vue2 中，Ant Design 的 ATreeSelect（树形选择器）组件允许通过 `treeNodeFilterProp` 属性来进行节点过滤，该属性用于指定节点上哪个属性会被用来匹配用户输入的关键字进行搜索。当你需要根据 `title`（节点标题）值进行搜索时，你可以将 `treeNodeFilterProp` 的值设置为 `'title'`。

例如，在组件的配置中，你可能会这样设置：

<atree-select
  :options="treeData"
  v-model="selectedValue"
  :tree-node-filter-prop="'title'"
/>

在这里，`treeData` 是包含节点数据的对象数组，`selectedValue` 是选中的节点值。当用户在 ATreeSelect 中输入内容，它会按 `title` 字段匹配显示节点。

如果你想要实现切换 title 值查询，可以在组件内部添加一个事件监听器，比如点击按钮时动态改变这个属性：

<template>
  <div>
    <button @click="toggleTitleFilter">切换查询字段</button>
    <atree-select ref="select" ...></atree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      treeData: [], // 初始化你的树数据
      treeNodeFilterProp: 'title', // 初始查询字段
    };
  },
  methods: {
    toggleTitleFilter() {
      this.treeNodeFilterProp = this.treeNodeFilterProp === 'title' ? 'someOtherProperty' : 'title';
      // 如果想保存当前状态，可以更新组件实例的状态
      this.$refs.select.treeNodeFilterProp = this.treeNodeFilterProp;
    }
  }
};
</script>

当点击 "切换查询字段" 按钮，`treeNodeFilterProp` 就会在 `'title'` 和 `'someOtherProperty'` 之间切换。