README
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"
>
<!-- 自定义列表header -->
<template #leftHeader>
<div>左侧列表</div>
</template>
<template #rightHeader>
<div>右侧列表</div>
</template>
<!-- 自定义button按钮 -->
<template #leftButton>
<el-button type="primary" @click="move('right')">向右移动</el-button>
</template>
<template #rightButton>
<el-button type="primary" @click="move('left')">向左移动</el-button>
</template>
<!-- 自定节点内容 -->
<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">左侧全选</el-button>
<el-button @click="cancel">左侧反选</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: [],
};
},
methods: {
selected() {
this.$refs.treeTransfer.changeTreeChecked(true, "left");
},
cancel() {
this.$refs.treeTransfer.changeTreeChecked(false, "left");
},
move(flag) {
this.$refs.treeTransfer[flag === "right" ? "rightMove" : "leftMove"]();
},
},
};
</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 | 右侧树自定义内容 |