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

strivelei / ele-tree-transfer

tree-transfer

简介

安装

挂载方式

1. 局部挂载：

2. 全局挂载：

快速启动

使用文档

事件

方法

slot

git仓库地址

简介

发行版

贡献者

近期动态

strivelei / ele-tree-transfer .gitee-modal { width: 500px !important; }

tree-transfer

简介

安装

挂载方式

1. 局部挂载：

2. 全局挂载：

快速启动

使用文档

事件

方法

slot

git仓库地址

简介

发行版

贡献者

近期动态

搜索帮助

strivelei / ele-tree-transfer