使用基于vue封装的tree-transfer插件遇到的坑

最新推荐文章于 2024-05-22 14:22:01 发布
最新推荐文章于 2024-05-22 14:22:01 发布
阅读量1.4k 收藏
点赞数
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/genius_panda_one/article/details/113352310
版权

使用基于vue封装的tree-transfer插件遇到的坑

使用tree-transfer插件,在使用后台返回的数据时,遇到了一堆问题, 比如左边的穿梭到右边, 然后在右边不显示,或者是显示的数据少一部分

官方文档的测试数据如下

在这里插入图片描述

我们后台返回的数据如下

在这里插入图片描述
注意点1: 后台返回的数据menuId就是上面测试数据的id, 我们必须将menuId全局替换成id, 这样tree-transfer插件就能正常识别层级了替换代码如下:

JSON.parse(JSON.stringify
最低0.47元/天 解锁文章
鋼のムーンサルト
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
树转移 简介 el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要的写成！不是在element-ui的穿梭框组件上的扩展，而明显参照了其外观样式和功能。 因为公司业务使用vue框架，ui库使用的element-ui。在城市表面找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件，因此就有了el-tree-transfer。轻量，
el-tree-transfer树形穿梭框回显左右节点重复问题
sdad2154的博客
12-24 1836
有的说是node-key 其实怎么说呢 配置了好久发现这个根本就是存在的bug。数据进行回显的时候 左右的节点会重复 网上介绍这个问题的特别少。我也不知道为啥很少介绍这个bug的存在的。项目开发过程中遇到个问题。
el-transfer和el-tree进行结合搞一个树形穿梭框
最新发布
bbkhhvv的博客
05-22 1292
由于业务需求需要在穿梭框里使用树形结构，但是本身element里并不支持，于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。
el-tree和vue结合的穿梭框el-tree-transfer的使用
anny_mei的博客
02-21 5219
首先el-tree-transfer的地址 github文档：https://github.com/hql7/tree-transfer 效果图 安装及使用 npm install el-tree-transfer --save //或者 npm i el-tree-transfer -S 然后在局部引入并注册组件就可以使用了 import treeTransfer from “el-tree-transfer”; // 引入 <!-- 使用树形穿梭框组件 -->
el-tree-transfer 树形穿梭框
觉醒法师的专栏
12-23 2908
el-tree-transfer是基于vue和element-ui的树形穿梭组件，使用前请确认是否引入element-ui。此组件类似element-ui的transfer组件，该组件分别是Checkbox多选框，Button按钮和Tree树形控件整合页成，在遇到需要树形穿梭功能时，推荐使用！...
el-tree-transfer自定义节点图标
weixin_45493439的博客
11-29 2073
el-tree-transfer结合el-tree自定义节点图标（文档地址） 效果图 1、el-tree-transfer是结合element-ui开发的，要想使用先下载 element-ui,在下载el-tree-transfer； npm install element-ui --save npm install el-tree-transfer --save el-tree-transfer可以全局引入或局部引入；全局就是在main.js里导入就行了；局部是在需要的文件夹里导入； import t
ElementUI中transfer组件左右数据同源问题
vcxiyh的博客
03-16 1504
ElementUI中transfer组件在数据更新时,右侧绑定数据会消失的问题及解决方案
vue-tree-color:漂亮的树看看那个
05-31
最后在GitHub上面找到了一款插件是 iview 的组织结构树 vue-org-tree ,但是由于文档不是特别易懂，自己踩了很多坑。不过定制性特别高，基本上会用到的方法都有了。所以今天来给大家讲解下。 自己也根据业务需求修改...
vue-tree-list:tree树形结构的Vue组件
05-02
import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList ) 或者只是像下面的示例一样在本地注册。 用 npm install vue-tree-list < button @click =" addNode " > Add Node </ button &gt...
vue-tree-chart:由D3.js支持的使用Canvas和Svg的灵活树形图
05-01
|演示页面演示Gif使用技术画布版本结合使用D3.js和Canvas可以更有效地绘制organizationChart。 使用unique-color方式... component ( 'vue-tree' , VueTree ) 3.使用组件3.1基本用法见代码< template> < div clas
el-tree-transfer.rar
04-10
一个基于vue和element-ui的树形穿梭框及邮件通讯录，使用前请确认已经引入element-ui！ 此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！ 实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
Vue-Awesome-Swiper 插件填坑问题详解 在本文中，我们将详细介绍 Vue 引入新版 Vue-Awesome-Swiper 插件填坑问题的解决方案。Vue-Awesome-Swiper 是一个基于 Swiper 的 Vue 组件库，它提供了许多有用的功能，如滑块...
CSDN markdown 编辑器模板
w-ind'的博客
10-05 4903
备份
vue element 树形穿梭框 ----- 插件el-tree-transfer
qq_43039004的博客
12-25 1809
npm install el-tree-transfer --save <template> <div> <tree-transfer :title="title" class="str" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" @add-btn='add' @remove-btn.
Vue使用treeTransfer树形穿梭
Along前端开发者
10-11 3163
开发中，经常有穿梭框的需求，但常见的灵活性较低，不支持左右树形，因此在项目开发过程中，摸索了treeTransfer库，是基于element组件库的。
ant design vue ＜a-transfer＞简单穿梭框实现
qq_46423858的博客
02-17 1337
简单穿梭框
el-transfer（穿梭框）一边数据为空时，尝试添加至另一边报错：Cannot read property ‘0‘ of null at patchBlockChildren (runtime-
qq_39973242的博客
03-02 724
<el-transfer v-model="transferData.value" :props="{key:'id',label:'name',disabled:'status'}" :data="transferData.data" style="text-align: left; display: inline-block" filterable :titles="['未拥有菜单', '已拥有菜单']" :button-texts="['分配', '移除']" :format="{noCheck
ant-design-vue穿梭框Transfer
2301_80409962的博客
11-01 448
transfer 标签里： dataSource :数据源，数据会被渲染到左边一栏中，targeKeys中指定的会去右边 titles:两个穿梭框的标题，['A','B'],从左到右 targetKeys:显示在右侧的的合集 filter-option:支持搜索，搜索框与选项框里面相匹配，里面接受两个参数（inputValue,option)前者是收缩框里面的内容，后者是第一行里面的所有数据，可以依据这里面的数据来选择自己需要的数据来匹
vue3使用element-tree-transfer
03-28
要在Vue3中使用Element Tree Transfer，需要先安装和引入Element和Vue3： 1. 安装Element和Vue3： ```bash npm install element-plus vue@next ``` 2. 在main.js中引入Element和Vue3： ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 在组件中使用Element Tree Transfer： ```vue <template> <el-tree-transfer :data="data" :titles="['Source', 'Target']" :render-content="renderContent" @change="handleChange" /> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', children: [ { id: 2, label: 'Node 1-1' }, { id: 3, label: 'Node 1-2' } ] }, { id: 4, label: 'Node 2' }, { id: 5, label: 'Node 3', children: [ { id: 6, label: 'Node 3-1' } ] } ], selectedKeys: [] } }, methods: { renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}</span> <span> <el-button size="mini" onClick={() => this.handleEdit(data)}>Edit</el-button> </span> </span> ) }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys) } } } </script> ``` 在上面的例子中，我们创建了一个包含Tree Transfer的组件。我们定义了一个data属性，用于渲染树形结构。我们还定义了一个renderContent函数，用于自定义每个节点的内容。最后，我们定义了一个handleChange方法，用于处理转移事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值