tree-transfer

树形穿梭框

简介

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

安装

npm install ele-tree-transfer -S

挂载方式

1. 局部挂载：

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

export default {
  components: {
    TreeTransfer,
  },
}

2. 全局挂载：

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

import TreeTransfer from "ele-tree-transfer";

Vue.use(TreeTransfer);

快速启动

<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