OptionSelector 选项选择器

组合 TreeFilter、ProPage 和已选列表的选项选择器，适合从列表中批量挑选业务对象。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { OptionSelector } from "@/components/pro/option-selector";

const config = { columns: [{ prop: "name", label: "名称" }], requestApi: async () => ({ total: 2, list: [{ id: 1, name: "材料 A" }, { id: 2, name: "材料 B" }] }) };
const leftData = [{ id: "all", name: "全部" }, { id: "group", name: "示例分类" }];
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <OptionSelector :config="config" :left-data="leftData" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { OptionSelector } from "@/components/pro/option-selector";

Props

参数	说明	类型	默认值	必填
leftData	左侧树形静态数据（优先级低于 config.treeFilter.requestApi）	TreeFilterItem[]	[]	否
initOptions	初始选中的选项 ID 列表	Array<number | string>	[]	否
config	选项选择器配置	LooseOptionSelectorConfig	-	是

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
getSelectedOptions	暴露 getSelectedOptions 给外部调用。	() =><br> dedup([...initialItems.value, ...userSelections.value])
getSelectedIds	暴露 getSelectedIds 给外部调用。	(): Array<number | string> => [...selectedIdSet.value]

Module API

名称	说明	类型
OptionSelector	导出 OptionSelector 供业务侧复用。	useInstall(index)

Types

TreeFilterItem

树形筛选器节点数据

字段	说明	类型	默认值	必填
id	节点标识	string | number	-	否
name	显示名称	string	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。