# ele-tree-transfer

**Repository Path**: sillycoder/ele-tree-transfer

## Basic Information

- **Project Name**: ele-tree-transfer
- **Description**: 基于vue+element-ui ，树形结构穿梭框组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 5
- **Created**: 2024-03-04
- **Last Updated**: 2024-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tree-transfer

> 树形穿梭框

## 简介

树形穿梭框组件，基于 vue + element-ui，使用场景：经营类目、部门选择等场景。使用前请先确认安装并注册 element-ui。

## 安装

```bash
npm install ele-tree-transfer -S
```

## 挂载方式

### 1. 局部挂载：

```bash
import { TreeTransfer } from "ele-tree-transfer";

export default {
  components: {
    TreeTransfer,
  },
}
```

### 2. 全局挂载：

在 main.js 文件中加入代码：

```bash
import TreeTransfer from "ele-tree-transfer";

Vue.use(TreeTransfer);
```

### 快速启动

```js
<template>
  <div id="app">
    <tree-transfer
      v-model="model"
      ref="treeTransfer"
      node-key="id"
      default-expand-all
      show-checkbox
      search
      showCheckAll
      showCheckNum
      nodeCheck
      :props="props"
      :data="data"
    >
      <!-- 自定义节点内容 -->
      <template #leftText="{ node }">
        <span>{{ node.label }}</span>
      </template>
      <template #rightText="{ node }">
        <span>{{ node.label }}</span>
      </template>
    </tree-transfer>
    <div class="buttons">
      <el-button @click="selected('left')">左侧全选</el-button>
      <el-button @click="cancel('left')">左侧反选</el-button>
      <el-button @click="selected('right')">右侧全选</el-button>
      <el-button @click="cancel('right')">右侧反选</el-button>
      <el-button @click="getValue">获取v-model绑定值</el-button>
      <el-button @click="empty">清空v-model</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      props: {
        label: "label",
        value: "id",
        children: "children",
        disabled: "disabled",
      },
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
            {
              id: 20,
              label: "二级 2-3",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
              disabled: false,
            },
          ],
        },
      ],
      model: [5, 6, 8],
    };
  },
  methods: {
    selected(loca) {
      this.$refs.treeTransfer.changeTreeChecked(true, loca);
    },
    cancel(loca) {
      this.$refs.treeTransfer.changeTreeChecked(false, loca);
    },
    move(flag) {
      this.$refs.treeTransfer[flag === "right" ? "rightMove" : "leftMove"]();
    },
    getValue() {
      console.log(this.model);
    },
    empty() {
      this.model = [];
    },
  },
};
</script>

<style scoped>
.buttons {
  margin-top: 10px;
}
</style>


```

## 使用文档

注：未标注的参数与方法，请参照element-ui tree组件。

| 序号 | 参数             | 说明                                                    | 类型                       | 默认值                                                                                     | 补充                                                      |
| ---- | ---------------- | ------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
| 1    | width            | 宽度                                                    | String                     | 100%                                                                                       | -                                                         |
| 2    | height           | 高度                                                    | String                     | 40vh                                                                                       | -                                                         |
| 3    | props            | 同 el-tree 属性 props                                   | Object                     | {label: "label",children: "children",disabled: "disabled",value: "value",isLeaf: () => {}} | -                                                         |
| 4    | checkedDisabled  | 选中节点后是否禁用该节点                                | Boolean                    | true                                                                                       | 选中禁用 |
| 5    | titles           | 自定义列表标题                                          | 同 el-transfer 组件 titles | Array                                                                                      | ["列表 1", "列表 2"]                                      | - |
| 6    | nodeKey          | 唯一标识                                                | String                     | id                                                                                         | -                                                         |
| 7    | checkedKeys      | 默认勾选的节点数组                                      | Array                      | []                                                                                         | -                                                         |
| 8    | placeholder      | 搜索提示文字                                            | Array                      | ["请输入内容", "请输入内容"]                                                               | -                                                         |
| 9    | search           | 是否可搜索                                              | Boolean                    | false                                                                                      | 默认不显示搜索                                            |
| 10   | inputLength      | 搜索输入长度                                            | Number                     | 50                                                                                         | -                                                         |
| 11   | data             | 展示数据                                                | Array                      | []                                                                                         | -                                                         |
| 12   | checkedBox       | 是否展示多选框                                          | Boolean                    | true                                                                                       | -                                                         |
| 13   | expandAll        | 是否默认展开所有节点                                    | Boolean                    | true                                                                                       | -                                                         |
| 14   | checkStrictly    | 是否遵循父子节点不关联                                  | Boolean                    | false                                                                                      | -                                                         |
| 15   | accordion        | 是否开启手风琴模式                                      | Boolean                    | false                                                                                      | -                                                         |
| 16   | nodeCheck        | 对底层节点添加点击节点本身选中当前节点                  | Boolean                    | false                                                                                      | 只支持最底层节点                                          |
| 17   | lazy             | 是否开启懒加载                                          | Boolean                    | false                                                                                      | -                                                         |
| 18   | load             | 懒加载回调                                              | Function                   | -                                                                                          | -                                                         |
| 19   | selectMax        | 限制可选中数量                                          | String/Number              | 50                                                                                         | -                                                         |
| 20   | isAcross         | 是否不允许跨一级添加 默认允许                           | Boolean                    | false                                                                                      | -                                                         |
| 21   | isSuperior       | 是否开启父节点选中子节点禁用规则                        | Boolean                    | false                                                                                      | -                                                         |
| 22   | isMostJunior     | 过滤上级节点，只保存最下级节点                          | Boolean                    | false                                                                                      | -                                                         |
| 23   | expandLevelKeys  | 默认展开到多少级，懒加载时需手动调用 defaultExpand 方法 | Object                     | {level: 0,key: "level"}                                                                    | 懒加载数据庞大时不推荐使用                                |
| 24   | showCheckAll     | 表头是否显示全选框                                      | Boolean                    | false                                                                                      | -                                                         |
| 25   | showCheckNum     | 表头是否显示总数以及勾选数量                            | Boolean                    | false                                                                                      | -                                                         |
| 26   | buttonTexts      | 自定义按钮文案                                          | Array                      | []                                                                                         | -                                                         |
| 27   | headerPosition   | 表头标题显示位置                                        | String                     | left                                                                                       | left 左，center 居中                                      |
| 28   | draggable        | 是否开启拖拽节点功能                                    | Boolean                    | false                                                                                      | -                                                         |
| 29   | draggableLevel   | 允许拖拽节点等级,默认 1 级                              | String/Number              | 1                                                                                          | 默认全部允许拖拽                                          |
| 30   | rightCheckChange | 右侧节点树勾选发生变化时回调                            | Function                   | -                                                                                          | -                                                         |
| 31   | allowDrag        | 判断节点能否被拖拽                                      | Function                   | -                                                                                          | -                                                         |
| 32   | allowDrop        | 拖拽时判定目标节点能否被放置                            | Function                   | -                                                                                          | -                                                         |
| 33   | nodeDragStart    | 节点开始拖拽时触发的事件                                | Function                   | -                                                                                          | -                                                         |
| 34   | nodeDragEnter    | 拖拽进入其他节点时触发的事件                            | Function                   | -                                                                                          | -                                                         |
| 35   | nodeDragLeave    | 拖拽离开某个节点时触发的事件                            | Function                   | -                                                                                          | -                                                         |
| 36   | nodeDragOver     | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）   | Function                   | -                                                                                          | -                                                         |
| 37   | nodeDragEnd      | 拖拽结束时（可能未成功）触发的事件                      | Function                   | -                                                                                          | -                                                         |
| 38   | nodeDrop         | 拖拽成功完成时触发的事件                                | Function                   | -                                                                                          | -                                                         |

> ---

## 事件

| 序号 | 事件名称        | 说明                                                  | 回调参数                                                                                                                             |
| ---- | --------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| 1    | checkedChange   | 右侧节点选中状态回调，返回唯一标识数组                | node-key 已勾选状态的数组                                                                                                            |
| 2    | node-click      | 节点被点击时的回调                                    | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身                                        |
| 1    | node-drag-start | 节点开始拖拽时触发的事件                              | 共两个参数，依次为：被拖拽节点对应的 Node、event                                                                                     |
| 2    | node-drag-enter | 拖拽进入其他节点时触发的事件                          | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event                                                              |
| 3    | node-drag-leave | 拖拽离开某个节点时触发的事件                          | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event                                                              |
| 4    | node-drag-over  | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event                                                            |
| 5    | node-drag-end   | 拖拽结束时（可能未成功）触发的事件                    | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event |
| 6    | node-drop       | 拖拽成功完成时触发的事件                              | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event             |

> ---

## 方法

| 序号 | 名称              | 说明                                                                     | 补充                                                                                                                                             |
| ---- | ----------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| 1    | enableOrDisableParent       | 启用or禁用父节点                                                       | enableOrDisableParent(data,type,all)，1：需要操作的节点data或key 参数2：true禁用 false启用 参数3：是否操作所有父级  |
| 2    | setChecked        | 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 | (key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
| 3    | getChecked        | 获取已选中数据方法                                                       | 返回由 node-key 组成的选中数据数组                                                                                                               |
| 4    | clearChecked      | 清除节点选中                                                             | clearChecked(type,clearChecked),type:left 左边 right 右边 all 全部清除,clearChecked：Boolean 是否取消禁用                                        |
| 5    | updateKeyChildren | 通过 keys 设置节点子元素，使用此方法必须设置 node-key 属性               | (key, data) 接收两个参数，1. 节点 key 2. 节点数据的数组                                                                                          |
| 6    | changeTreeChecked | 设置整棵树节点全选与反选                                                 | (true, "left") 接收两个参数，1.节点选中与否，true 选中 false 取消选中。2.String 类型 left 左边树，right 右边树                                   |
| 7 | enableOrDisableNode | 启用or禁用某个节点 | enableOrDisableNode(data,type)，1：需要操作的节点data或key 2、Boolean：true禁用，false启用 |
| 8 | clearSearch | 清除搜索条件 | clearSearch(key) 默认左右两侧搜索条件，key传值：left左侧，right：右侧 |
> ---

## slot

| 序号 | 插槽名称     | 说明         |
| ---- | ------------ | ------------ |
| 1    | leftHeader  | 左侧头部插槽 |
| 2    | rightHeader | 右侧头部插槽 |
| 3    | leftSearch  | 左侧搜索框插槽 |
| 4    | rightSearch | 右侧搜索框插槽 |
| 5    | leftButton  | 左侧按钮插槽 |
| 6    | rightButton | 右侧按钮插槽 |
| 7    | leftText | 左侧树自定义内容 |
| 8    | rightText | 右侧树自定义内容 |

> ---
## git仓库地址
https://gitee.com/yt1997/ele-tree-transfer