#### 基础样例

```vue
<template>
  <div>
    <div>
      多选
      <sd-tree-picker v-model="v3" :load-tree-data="loadTreeData" :default-expanded-keys="['0']">
      </sd-tree-picker>
      {{ v3 }}
    </div>
    <div>
      单选
      <sd-tree-picker v-model="v4" single :load-tree-data="loadTreeData"> </sd-tree-picker>
      {{ v4 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ id: 'G_1_flow01', name: 'asdf' }],
      v4: [{ id: 'G_1_flow01', name: 'asdf' }],
    }
  },
  methods: {
    loadTreeData(parentCatId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              id: parentCatId ? Math.random().toString() : i.toString(),
              name: `节点${i + 1}`,
              checkable: isLeaf,
              isLeaf,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```

#### 带搜索框

传入 searchTreeData 函数，就会显示搜索框

```vue
<template>
  <div>
    <div>
      多选
      <sd-tree-picker
        v-model="v3"
        :load-tree-data="loadTreeData"
        :search-tree-data="searchTreeData"
      >
      </sd-tree-picker>
      {{ v3 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ id: 'G_1_flow01', name: 'asdf' }],
    }
  },
  methods: {
    loadTreeData(parentCatId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              id: Math.random().toString(),
              name: `节点${i + 1}`,
              checkable: isLeaf,
              isLeaf,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
    searchTreeData(text) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []

          for (let i = 0; i < 3; i++) {
            dataSource.push({
              id: Math.random().toString(),
              name: text + (i + 1),
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```

#### 搜索结果有可展开的子树

把搜索结果标记成非叶子节点即可

```vue
<template>
  <div>
    <div>
      多选
      <sd-tree-picker
        v-model="v3"
        :load-tree-data="loadTreeData"
        :search-tree-data="searchTreeData"
      >
      </sd-tree-picker>
      {{ v3 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ id: 'G_1_flow01', name: 'asdf' }],
    }
  },
  methods: {
    loadTreeData(parentCatId) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              id: Math.random().toString(),
              name: `节点${i + 1}`,
              checkable: isLeaf,
              isLeaf,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
    searchTreeData(text) {
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []

          for (let i = 0; i < 3; i++) {
            dataSource.push({
              id: Math.random().toString(),
              name: text + (i + 1),
              isLeaf: false,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```
