antdv穿梭框树形数据的搜索

Ant Design Vue 的穿梭框（Transfer）组件提供了一个 `filter` 属性，可以用于搜索树形数据。

首先，需要将树形数据转换为穿梭框所需的数据格式，即包含 `key`、`label` 和 `disabled` 属性的数组格式。可以使用递归方式实现：

function flattenTreeData(data) {
  const result = []
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    result.push({
      key: node.id,
      label: node.name,
      disabled: node.disabled,
    })
    if (node.children) {
      result.push(...flattenTreeData(node.children))
    }
  }
  return result
}

然后，在穿梭框中添加 `filter` 属性，该属性的值为一个函数，用于根据关键字过滤数据：

<template>
  <a-transfer
    :data-source="leftData"
    :target-keys="rightData"
    :filter="filterData"
  />
</template>

<script>
export default {
  data() {
    return {
      leftData: [], // 左侧树形数据
      rightData: [], // 右侧穿梭框数据
      keyword: '', // 搜索关键字
    }
  },
  methods: {
    filterData(inputValue, item) {
      if (!inputValue) return true
      return item.label.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1
    },
  },
  created() {
    // 将树形数据转换为穿梭框所需的数据格式
    this.leftData = flattenTreeData(treeData)
  },
}
</script>

在 `filterData` 函数中，会传入两个参数：`inputValue` 表示搜索框中输入的关键字，`item` 表示穿梭框中的每一项数据。该函数需要返回一个布尔值，表示该项是否需要显示。这里使用了 `indexOf` 方法对字符串进行模糊匹配。

使用以上代码，即可在树形数据中进行搜索。