SdValuePicker 是更底层的选择器组件，支持多个列表、树等数据源

如果是从单一数据源选择数据，可以使用 [SdListPicker](#sdlistpicker)、[SdTreePicker](#sdtreepicker)

#### 基础样例

```vue
<template>
  <div>
    <div>
      多选
      <sd-value-picker v-model="v3" optionValue="code" optionLabel="label">
        <template v-slot="scope">
          <sd-picker-source-tree
            title="树"
            icon="android"
            :load-tree-data="loadTreeData"
            :default-expanded-keys="['0']"
            v-bind="scope"
          />
          <sd-picker-source-list
            title="列表"
            icon="apple"
            :load-list-data="loadListData"
            v-bind="scope"
          />
        </template>
      </sd-value-picker>
      {{ v3 }}
    </div>
    <div>
      单选
      <sd-value-picker single v-model="v4" optionValue="code" optionLabel="label">
        <template v-slot="scope">
          <sd-picker-source-tree icon="android" :load-tree-data="loadTreeData" v-bind="scope" />
          <sd-picker-source-list title="列表" :load-list-data="loadListData" v-bind="scope" />
        </template>
      </sd-value-picker>
      {{ v4 }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ code: 'G_1_flow01', label: 'asdf' }],
      v4: [{ code: 'G_1_flow01', label: 'asdf' }],
    }
  },
  methods: {
    loadListData() {
      // 模拟的假数据
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []

          for (let i = 0; i < 20; i++) {
            dataSource.push({
              code: i.toString(),
              type: 'list',
              label: `content${i + 1}`,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
    loadTreeData(parentCatId, parentCatObj) {
      console.log(parentCatId, parentCatObj)
      // 模拟的假数据
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              code: parentCatId ? Math.random().toString() : i.toString(),
              label: `节点${i + 1}`,
              checkable: isLeaf,
              isLeaf,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```

#### 树选择带搜索框

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

```vue
<template>
  <div>
    <sd-value-picker v-model="v3" optionValue="code" optionLabel="label">
      <template v-slot="scope">
        <sd-picker-source-tree
          title="树"
          icon="android"
          :load-tree-data="loadTreeData"
          :search-tree-data="searchTreeData"
          v-bind="scope"
        />
      </template>
    </sd-value-picker>
    {{ v3 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ code: 'G_1_flow01', label: 'asdf' }],
    }
  },
  methods: {
    loadTreeData(parentCatId) {
      // 模拟的假数据
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              code: Math.random().toString(),
              label: `节点${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({
              code: Math.random().toString(),
              label: text + (i + 1),
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```

#### 选项的鼠标悬停信息

通过 render prop 可以定制选项的显示内容+悬停信息

```vue
<template>
  <div>
    <sd-value-picker v-model="v3" optionValue="code" optionLabel="label" :render="itemRender">
      <template v-slot="scope">
        <sd-picker-source-tree :load-tree-data="loadTreeData" v-bind="scope" />
      </template>
    </sd-value-picker>
    {{ v3 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ code: 'G_1_flow01', label: 'asdf' }],
    }
  },
  methods: {
    itemRender(item) {
      return {
        label: item.label,
        value: item.title,
      }
    },
    loadTreeData(parentCatId) {
      // 模拟的假数据
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []
          for (let i = 0; i < 5; i++) {
            const isLeaf = !!parentCatId
            dataSource.push({
              code: Math.random().toString(),
              label: `节点${i + 1}`,
              title: `悬停信息${i + 1}`,
              checkable: isLeaf,
              isLeaf,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```

#### 将已选中的值保存起来

通过 targetListHeader 插槽，可以在已选列表区增加按钮

```vue
<template>
  <div>
    <sd-value-picker v-model="v3" optionValue="code" optionLabel="label">
      <template v-slot="scope">
        <sd-picker-source-list :load-list-data="loadListData" v-bind="scope" />
      </template>
      <template v-slot:targetListHeader="{ targetKeys, targetValues }">
        <a-button type="link" @click="saveTarget(targetKeys, targetValues)">保存</a-button>
      </template>
    </sd-value-picker>
    {{ v3 }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      v3: [{ code: 'G_1_flow01', label: 'asdf' }],
    }
  },
  methods: {
    saveTarget(keys, values) {
      console.log(keys, values)
    },
    loadListData() {
      // 模拟的假数据
      return new Promise((resolve) => {
        setTimeout(() => {
          const dataSource = []

          for (let i = 0; i < 20; i++) {
            dataSource.push({
              code: i.toString(),
              type: 'list',
              label: `content${i + 1}`,
            })
          }
          resolve(dataSource)
        }, 400)
      })
    },
  },
}
</script>
```
