Appearance

Return to top
目录

TreeTransfer 树形穿梭框

基于el-tree封装的树形穿梭框

基础用法

Level one 1
Level two 1-1
Level three 1-1-1
Level one 2
Level two 2-1
Level three 2-1-1
Level two 2-2
Level three 2-2-1
Level one 3
Level two 3-1
Level three 3-1-1
Level two 3-2
Level three 3-2-1
No Data
vue
<template>
  <jlc-tree-transfer :data="data" source-title="我是源树标题" target-title="我是目标树标题" />
</template>

<script setup lang='ts'>
import { JlcTreeTransfer } from '@sz-jlc/admin-vue3'

const data = [
  {
    label: "Level one 1",
    id: 1,
    children: [
      {
        label: "Level two 1-1",
        id: 2,
        children: [
          {
            label: "Level three 1-1-1",
            id: 3,
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    id: 4,
    children: [
      {
        label: "Level two 2-1",
        id: 5,
        children: [
          {
            label: "Level three 2-1-1",
            id: 6,
          },
        ],
      },
      {
        label: "Level two 2-2",
        id: 7,
        children: [
          {
            label: "Level three 2-2-1",
            id: 8,
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    id: 9,
    children: [
      {
        label: "Level two 3-1",
        id: 10,
        children: [
          {
            label: "Level three 3-1-1",
            id: 11,
          },
        ],
      },
      {
        label: "Level two 3-2",
        id: 12,
        children: [
          {
            label: "Level three 3-2-1",
            id: 13,
          },
        ],
      },
    ],
  },
]
</script>

初始目标数据

Level one 1
Level two 1-1
Level three 1-1-1
Level one 2
Level two 2-1
Level three 2-1-1
Level two 2-2
Level three 2-2-1
Level one 3
Level two 3-1
Level three 3-1-1
Level two 3-2
Level three 3-2-1
No Data
vue
<template>
  <jlc-tree-transfer :data="data" :target-ids="targetIds"/>
</template>

<script setup lang='ts'>
import { JlcTreeTransfer } from '@sz-jlc/admin-vue3'

const data = [
  {
    label: "Level one 1",
    id: 1,
    children: [
      {
        label: "Level two 1-1",
        id: 2,
        children: [
          {
            label: "Level three 1-1-1",
            id: 3,
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    id: 4,
    children: [
      {
        label: "Level two 2-1",
        id: 5,
        children: [
          {
            label: "Level three 2-1-1",
            id: 6,
          },
        ],
      },
      {
        label: "Level two 2-2",
        id: 7,
        children: [
          {
            label: "Level three 2-2-1",
            id: 8,
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    id: 9,
    children: [
      {
        label: "Level two 3-1",
        id: 10,
        children: [
          {
            label: "Level three 3-1-1",
            id: 11,
          },
        ],
      },
      {
        label: "Level two 3-2",
        id: 12,
        children: [
          {
            label: "Level three 3-2-1",
            id: 13,
          },
        ],
      },
    ],
  },
]

const targetIds = [1, 3, 6]
</script>

自定义数据字段

有时数据结构并不一定符合组件要求，那么就可以自定义数据的字段名，可以配置id字段名，以及理论上支持el-tree的所有props，但目前暂未核实，如有问题请反馈。

Level one 1
Level two 1-1
Level three 1-1-1
Level one 2
Level two 2-1
Level three 2-1-1
Level two 2-2
Level three 2-2-1
Level one 3
Level two 3-1
Level three 3-1-1
Level two 3-2
Level three 3-2-1
No Data
vue
<template>
  <jlc-tree-transfer :data="data" :props="props" />
</template>

<script setup lang='ts'>
import { JlcTreeTransfer } from '@sz-jlc/admin-vue3'

const props = {
  children: 'subTree',
  id: 'uid',
  label: 'title'
}

const data = [
  {
    title: "Level one 1",
    uid: 1,
    subTree: [
      {
        title: "Level two 1-1",
        uid: 2,
        subTree: [
          {
            title: "Level three 1-1-1",
            uid: 3,
          },
        ],
      },
    ],
  },
  {
    title: "Level one 2",
    uid: 4,
    subTree: [
      {
        title: "Level two 2-1",
        uid: 5,
        subTree: [
          {
            title: "Level three 2-1-1",
            uid: 6,
          },
        ],
      },
      {
        title: "Level two 2-2",
        uid: 7,
        subTree: [
          {
            title: "Level three 2-2-1",
            uid: 8,
          },
        ],
      },
    ],
  },
  {
    title: "Level one 3",
    uid: 9,
    subTree: [
      {
        title: "Level two 3-1",
        uid: 10,
        subTree: [
          {
            title: "Level three 3-1-1",
            uid: 11,
          },
        ],
      },
      {
        title: "Level two 3-2",
        uid: 12,
        subTree: [
          {
            title: "Level three 3-2-1",
            uid: 13,
          },
        ],
      },
    ],
  },
]
</script>

属性

属性名说明类型可选值默认值是否必填
data树形数据Object[]--是
targetIds目标数据id列表any[]--否
props自定义字段名，详细配置见下文Object--否
sourceTitle源树标题string-源否
targetTitle目标树标题string-目标否

Props

属性名说明类型可选值默认值是否必填
id唯一id的字段名，不同子集下的id也要不一样any--否
parentId父级idany--否
el-tree的props预期情况下支持所有el-tree的props，若某个场景下存在问题，请反馈。---否

方法

方法名描述参数
getSourceNodes获取源树节点-
getTargetNodes获取目标树节点-
getCommonNodes获取源树和目标树均有的节点-

事件

事件名说明回调参数
---

插槽

插槽说明
middle源树和目标树中间的操作按钮，可接收到两个方法：toTarget、toSource

深圳嘉立创前端团队