一个基于vue和element-ui的树形穿梭框组件

el-tree-transfer是一个基于Vue和Element-UI的树形穿梭框组件,实现了类似element-ui transfer的功能,但数据结构为树形。组件依赖element-ui的Checkbox、Button和Tree组件,提供了通讯录模式和树形穿梭框模式。它轻量、易用,无需额外学习成本,支持数据筛选、懒加载等功能,适用于不想在element-ui之外引入其他插件的vue项目。
摘要由CSDN通过智能技术生成

# el-tree-transfer

 

## 简介

 

---

 

el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件,使用前请确认已经引入[element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)!

此组件功能类似于`element-ui`的[transfer](http://element.eleme.io/#/zh-CN/component/transfer)组件,但是里面的数据是树形结构!

实际上,el-tree-transfer 依赖的 element-ui 组件分别是[Checkbox 多选框](http://element.eleme.io/#/zh-CN/component/checkbox#checkbox-duo-xuan-kuang),[Button 按钮](http://element.eleme.io/#/zh-CN/component/button),和最主要的[Tree 树形控件](http://element.eleme.io/#/zh-CN/component/tree)写成!并非是在 element-ui 的穿梭框组件上的扩展,而仅仅是参照了其外观样式和功能。

 

因为公司业务使用 vue 框架,ui 库使用的 element-ui。在市面上找到一个好用的 vue 树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在 element-ui 之外引入其他重量级插件,因此就有了 el-tree-transfer。轻量,易用,无需投入其他学习成本。

 

### [在线访问](http://tree-transfer.zhongxiang.shop/) - [GitHub](https://github.com/hql7/tree-transfer) - [NPM](https://www.npmjs.com/package/el-tree-transfer) - [SegmentFault](https://segmentfault.com/a/1190000015553081) - [CSDN](https://blog.csdn.net/qq_15390381/article/details/80943549)- [掘金](https://juejin.im/post/5b3ecae8e51d4519213fae4b)

 

#### 注意! 2.2.0 版本增加lazy懒加载功能

#### 注意! 2.0.0 版本存在父子不关联错误,2.1.1 版本增加 arrayToTree 支持,但已经是树形数据的请不要使用此参数

#### 注意! 1.9.0 版本增强 id 为数字型的匹配强度,1.9.7 版本增加`defaultTransfer`属性用来满足用户不想将数据拆分成 fromData 和 toData 的需求

#### 注意! 1.8.7 版本增加通讯录模式,可通过 mode 字段配置模式

#### 注意! 1.7.7 版本移动事件参数调整,直接返回移动后的 fromData 数据和 toData 数据。

#### 注意! 1.5 以上版本改为自动处理

> 第一层数据的 pid 请设定为 0!! pid 就是父级的 id!别再跑过来问了真的

> id 推荐为 string,但也可以是 number,请不要混用,id 不要重复!!!

#### 这里有一个兄弟组件-树形表格:[在线访问](http://eltreetable.zhongxiang.shop/) - [GitHub](https://github.com/hql7/el-tree-table)

 

## 快速上手

 

> 先 npm 下载插件

 

`npm install el-tree-transfer --save`

 

 

`npm i el-tree-transfer -S`

 

> 然后你可以像使用普通组件一样使用 el-tree-transfer

 

    <template>

      <div>

        // 你的代码

        ...

        // 使用树形穿梭框组件

        <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @addBtn='add' @removeBtn='remove' :mode='mode' height='540px' filter openAll>

      </tree-transfer>

      </div>

    </template>

 

    <script>

      import treeTransfer from 'el-tree-transfer' // 引入

 

      export defult {

        data(){

          return:{

            mode: "transfer", // transfer addressList

            fromData:[

              {

                id: "1",

                pid: 0,

                label: "一级 1",

                children: [

                  {

                    id: "1-1",

                    pid: "1",

                    label: "二级 1-1",

                    disabled: true,

                    children: []

                  },

                  {

                    id: "1-2",

                    pid: "1",

                    label: "二级 1-2",<

评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值