element-tree-transfer-pro-v3来啦，支持了vue3+element+的版本

Herozzq
365 阅读3分钟

项目简介：

此插件为element-tree-transfer-pro的平迁，改成了vue3的写法，在用vue3 element+的小伙伴可以来体验一下哦

插件特性：

  1. 和element原生穿梭框样式交互高度统一，样式兼容做的更好。
  2. 还原了大部分element原生穿梭框的api,上手门槛低，使用起来得心应手。
  3. 新增了单选和父子级关联等功能，可以适应更广泛的业务场景。

插件使用：

安装：npm i element-tree-transfer-pro-v3
预览图：

35CA88F0-72F0-41D9-A283-5491F8964A24.png

示例代码:
<template>
    <div id="app">
        <tree-transfer ref="treeTransfer" :data-source.sync="dataSource" :default-checked-keys="defaultValue" @left-check-change="handleLeftCheckChange" @right-check-change="handleRightCheckChange" @change="handleChange" :isRadio="false" :filterable="true" :father-choose="false">
        </tree-transfer>
    </div>
</template>

<script>
    import treeTransfer from 'element-tree-transfer-pro-v3'
    const tree = [{
            label: "A部门",
            id: "1",
            children: [{
                    label: "小明",
                    children: [],
                    id: "1-1",
                },
                {
                    label: "小红",
                    children: [],
                    id: "1-2",
                },
                {
                    label: "小刚",
                    children: [],
                    id: "1-3",
                },
            ],
        },
        {
            label: "B部门",
            id: "2",
            children: [{
                    label: "小王",
                    children: [],
                    id: "2-1",
                },
                {
                    label: "小李",
                    children: [],
                    id: "2-2",
                },
                {
                    label: "小朱",
                    children: [],
                    id: "2-3",
                },
            ],
        },
    ]
    export default {
        name: "App",
        components: {
            treeTransfer,
        },
        data() {
            return {
                dataSource: tree,
                defaultValue: [],

            };
        },
        mounted() {
            this.defaultValue = ["1-2"]
        },
        methods: {
            handleChange(value, direction, currentKeys) {
                console.log('handleChange', value, direction, currentKeys)
            },
            handleLeftCheckChange(value, currentKeys) {
                console.log("handleLeftCheckChange:", value, currentKeys);
            },
            handleRightCheckChange(value, currentKeys) {
                console.log("handleRightCheckChange:", value, currentKeys);
            },
        },
    }
</script>
其他配置项:

Attributes

参数说明类型可选值默认值
width容器总宽度string—800px
height容器总高度string—500px
dataSource左侧树数据源array—[ ]
nodeKeyel-tree的key（必须唯一）string—id
defaultPropsel-tree 配置项Object—{ label: "label", children: "children" }
default-checked-keys左侧树默认选中穿梭节点array—[ ]
default-expanded-keys树默认展开节点array—[ ]
accordion是否每次只打开一个树节点boolean—false
render-after-expand是否在第一次展开某个树节点后才渲染其子节点boolean—true
expand-on-click-node是否在点击节点的时候展开或者收缩节点boolean—true
father-choose是否严格的遵循父子不互相关联的做法, 父节点是否可被选择穿梭boolean—false
isRadio左侧数据源是否为单选boolean—false
openAll树节点是否默认展开boolean—false
filterable是否可搜索boolean—false
filter-placeholder搜索框占位符string—请输入搜索内容
filter-method自定义搜索方法function——
titles自定义标题array—['源数据', '目标列表']
button-texts自定义按钮文案array—[ ]

Slot

name说明
left-footer左侧列表底部的内容
right-footer右侧列表底部的内容

Methods

方法名说明参数
clearQuery清空某个面板的搜索关键词'left' / 'right' / 'all'，指定需要清空的搜索框
getTreeChecked获取左侧树全部选中状态'leftKeys', 'leftHarfKeys', 'leftNodes', 'leftHalfNodes'

Events

事件名称说明回调参数
change右侧列表元素变化时触发当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组
left-check-change左侧列表元素被用户选中 / 取消选中时触发当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
right-check-change右侧列表元素被用户选中 / 取消选中时触发当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组
如果觉得好用，可以点一个 star🌟 支持一下～ github地址
avatar
文章
阅读
粉丝