BizTreeTransfer 树形穿梭框

左右双树的树形穿梭框：左树全量勾选 → 右树实时投影已选（勾选节点按层级嵌套显示，半选祖先作纯容器节点），右树节点 hover 移除按钮反向取消勾选。v-model 为已选 key 集合（受控），check-strictly 支持父子不关联模式，双侧搜索过滤，标题栏计数。菜单授权、数据权限配置、角色资源分配——替代 el-transfer 仅支持平铺列表的场景。

采用即时同步交互（勾选即穿梭，无中间确认按钮），左右状态始终一致，适合授权类配置页；提交时机由业务方在保存按钮上自行决定。

基础用法

v-model 已选 key 集合，父子关联模式（勾父含子），右树实时投影。

<script setup lang="ts">
/** 场景：菜单授权——基础即时穿梭（勾选即入右树，父子关联），v-model 已选 key 集合 */
import { ref } from 'vue'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

const data: BizTreeTransferNodeData[] = [
  {
    id: 1,
    label: '系统管理',
    children: [
      { id: 11, label: '用户管理', children: [{ id: 111, label: '用户列表' }, { id: 112, label: '用户分组' }] },
      { id: 12, label: '角色管理' },
      { id: 13, label: '操作日志' },
    ],
  },
  {
    id: 2,
    label: '订单中心',
    children: [
      { id: 21, label: '订单列表' },
      { id: 22, label: '售后管理' },
    ],
  },
]

const checked = ref<Array<string | number>>([12, 21])
</script>

<template>
  <div>
    <BizTreeTransfer v-model="checked" :data="data" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      已选 keys：{{ checked.length ? checked.join('、') : '（暂无）' }}
    </p>
  </div>
</template>

父子不关联

check-strictly 勾父不含子逐项独立，右树仅显示所勾节点本身；titles 自定义双侧标题。

<script setup lang="ts">
/** 场景：数据权限——checkStrictly 父子不关联，勾父不含子逐项独立，右树仅显示所勾节点本身 */
import { ref } from 'vue'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

const data: BizTreeTransferNodeData[] = [
  {
    id: 100,
    label: '华南区域',
    children: [
      { id: 101, label: '广东省', children: [{ id: 1011, label: '深圳市' }, { id: 1012, label: '广州市' }] },
      { id: 102, label: '福建省' },
    ],
  },
  {
    id: 200,
    label: '华东区域',
    children: [{ id: 201, label: '浙江省' }, { id: 202, label: '江苏省' }],
  },
]

const checked = ref<Array<string | number>>([101, 201])
</script>

<template>
  <BizTreeTransfer
    v-model="checked"
    :data="data"
    check-strictly
    :titles="['可选区域', '已授权区域']"
  />
</template>

双侧搜索

searchable 左右独立过滤，命中路径自动展开。

<script setup lang="ts">
/** 场景：双侧检索——searchable 左右独立过滤，命中路径自动展开，右树按已选集合过滤 */
import { ref } from 'vue'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

const data: BizTreeTransferNodeData[] = [
  {
    id: 1,
    label: '商品中心',
    children: [
      { id: 11, label: '商品列表' },
      { id: 12, label: '分类管理' },
      { id: 13, label: '品牌管理' },
    ],
  },
  {
    id: 2,
    label: '营销中心',
    children: [
      { id: 21, label: '优惠券' },
      { id: 22, label: '满减活动' },
      { id: 23, label: '秒杀会场' },
    ],
  },
  {
    id: 3,
    label: '会员中心',
    children: [{ id: 31, label: '会员列表' }, { id: 32, label: '积分规则' }],
  },
]

const checked = ref<Array<string | number>>([11, 21])
</script>

<template>
  <BizTreeTransfer v-model="checked" :data="data" searchable :height="280" />
</template>

自定义节点

暂无数据

default slot 双侧生效（图标 + 描述文案），tree-props 重定义 label 字段。

<script setup lang="ts">
/** 场景：自定义节点——default slot 双侧生效（图标 + 描述文案），treeProps 重定义字段 */
import { Folder, Menu } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

interface ResourceNode extends BizTreeTransferNodeData {
  name: string
  desc?: string
  children?: ResourceNode[]
}

const data: ResourceNode[] = [
  {
    name: '工作台',
    children: [
      { name: '待办事项', desc: '个人待办与催办' },
      { name: '快捷入口', desc: '常用功能收藏' },
    ],
  },
  {
    name: '审批中心',
    children: [
      { name: '我的申请', desc: '发起的流程' },
      { name: '我的审批', desc: '待我处理的单据' },
    ],
  },
]
</script>

<template>
  <BizTreeTransfer :data="data" :tree-props="{ label: 'name' }" :height="280">
    <template #default="{ data }">
      <span style="display: inline-flex; align-items: center; gap: 6px; min-width: 0">
        <ElIcon :size="15" style="color: var(--el-color-primary); flex-shrink: 0">
          <Menu v-if="(data as ResourceNode).children?.length" />
          <Folder v-else />
        </ElIcon>
        <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
          {{ (data as ResourceNode).name }}
        </span>
        <span
          v-if="(data as ResourceNode).desc"
          style="font-size: 12px; color: var(--el-text-color-secondary); flex-shrink: 0"
        >
          {{ (data as ResourceNode).desc }}
        </span>
      </span>
    </template>
  </BizTreeTransfer>
</template>

外部受控

v-model 双向同步，外部重置直接改绑定值，组件自动回写左树勾选态；change 在每次勾选变化时触发。

<script setup lang="ts">
/** 场景：外部受控——v-model 双向同步，重置 / 全选由外部状态驱动回写左树 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

const data: BizTreeTransferNodeData[] = [
  {
    id: 1,
    label: '基础权限',
    children: [{ id: 11, label: '查看' }, { id: 12, label: '新增' }, { id: 13, label: '编辑' }],
  },
  {
    id: 2,
    label: '高级权限',
    children: [{ id: 21, label: '删除' }, { id: 22, label: '导出' }],
  },
]

const checked = ref<Array<string | number>>([11, 12])

const reset = (): void => {
  checked.value = [11]
  ElMessage.info('已重置为初始授权')
}
</script>

<template>
  <div>
    <BizTreeTransfer
      v-model="checked"
      :data="data"
      :height="260"
      @change="(keys) => ElMessage.success(`当前授权 ${keys.length} 项`)"
    />
    <div style="margin-top: 10px">
      <ElButton size="small" @click="reset">重置授权</ElButton>
    </div>
  </div>
</template>

禁用与空态

整体禁用、空数据空态、右树 hover 逐项移除。

<script setup lang="ts">
/** 场景：禁用与边界——整体禁用、空数据空态、右树逐项移除 */
import { ref } from 'vue'
import { ElButton, ElSwitch } from 'element-plus'
import { BizTreeTransfer } from 'vue3-ep-biz-lib'
import type { BizTreeTransferNodeData } from 'vue3-ep-biz-lib'

const data = ref<BizTreeTransferNodeData[]>([
  {
    id: 1,
    label: '通知渠道',
    children: [
      { id: 11, label: '站内信' },
      { id: 12, label: '短信' },
      { id: 13, label: '邮件' },
    ],
  },
])

const checked = ref<Array<string | number>>([11, 12, 13])
const disabled = ref(false)

const toggleEmpty = (): void => {
  data.value = data.value.length === 0
    ? [{ id: 1, label: '通知渠道', children: [{ id: 11, label: '站内信' }] }]
    : []
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 12px">
      <span style="font-size: 13px">禁用</span>
      <ElSwitch v-model="disabled" />
      <ElButton size="small" @click="toggleEmpty">切换空数据</ElButton>
    </div>
    <BizTreeTransfer v-model="checked" :data="data" :disabled="disabled" :height="240" />
  </div>
</template>

Props

属性名	类型	默认值	说明
data	`BizTreeTransferNodeData[]`	`[]`	左树全量数据（右树由勾选结果投影生成）
v-model	`Array<string \| number>`	`[]`	已选节点 key 集合（受控，外部变更自动回写左树）
tree-props	`TreeOptionProps`	—	字段映射（透传 el-tree props：label / children / disabled / isLeaf）
node-key	`string`	`'id'`	节点唯一键字段名
check-strictly	`boolean`	`false`	复选父子不关联（勾父不含子，右树仅显示所勾节点本身）
searchable	`boolean`	`false`	双侧搜索框
filter-placeholder	`string`	`'请输入关键字'`	搜索占位文案
filter-method	`(query, data) => boolean`	—	自定义过滤方法（默认 label 包含匹配，不区分大小写）
titles	`[string, string]`	`['待选择', '已选择']`	双侧面板标题
height	`number \| string`	`320`	面板主体高度（超出滚动）
disabled	`boolean`	`false`	整体禁用
empty-text	`string`	`'暂无数据'`	空态文案

Events

事件名	参数	说明
update:model-value	`(keys: Array<string \| number>)`	已选集合变化（v-model）
change	`(keys: Array<string \| number>)`	已选集合变化（勾选 / 移除 / 清空后触发）

Slots

插槽名	说明
default	节点内容双侧生效，作用域 `{ node, data }`（不传时渲染 label）

Expose

名称	类型	说明
getLeftTree	`() => TreeInstance`	左树 el-tree 实例
getCheckedNodes	`() => BizTreeTransferNodeData[]`	已选完整节点数据集合（含各级勾选节点）
clear	`() => void`	清空已选

TIP

已选项回显依赖 data 中包含对应节点（组件从全量树投影右树）；若后端仅返回 key 列表，先反查补全数据结构再传入。

BizTreeTransfer 树形穿梭框 ​

基础用法 ​

父子不关联 ​

双侧搜索 ​

自定义节点 ​

外部受控 ​

禁用与空态 ​

Props ​

Events ​

Slots ​

Expose ​