element 树形穿梭框使用

想做一个树形穿梭框的效果，看了下当前element的官网，只有列表形式的穿梭框，搜了下其他达人帖子，有一些例子，参考着做了写。

1、先仿照达人的例子，代码整个po上，跑出来看看效果，结果提示

This dependency was not found:

* el-tree-transfer in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/views/sys/user/SysRolePermissionTree2.vue

To install it, you can run: npm install --save el-tree-transfer

那就安装下吧，按提示执行命令

D:\project>npm i el-tree-transfer -S
WARNING: You are likely using a version of node-tar or npm that is incompatible with this version of Node.js.
Please use either the version of npm that is bundled with Node.js, or a version of npm (> 5.5.1 or < 5.4.0) or node-tar (> 4.0.1) that is compatible with Node.js 9 and above.
npm[16380]: c:\ws\src\node_zlib.cc:568: Assertion `args.Length() == 7 && "init(windowBits, level, memLevel, strategy, writeResult, writeCallback," " dictionary)"' failed.

看这意思还得有npm版本要求，再看看我的版本：

D:\project>npm  -version
5.4.0

果然不符合要求  那就升级下吧

D:\project\>cnpm i -g npm
Downloading npm to D:\app\nodejs\node_global\node_modules\npm_tmp
Copying D:\app\nodejs\node_global\node_modules\npm_tmp\_npm@6.14.4@npm to D:\app\nodejs\node_global\node_modules\npm
Installing npm's dependencies to D:\app\nodejs\node_global\node_modules\npm/node_modules
....
[114/115] Packgage  worker-farm@^1.7.0 is skipped because it already exists at: D:\app\nodejs\node_global\node_modules\npm\node_modules\worker-farm
[115/115] Packgage  write-file-atomic@^2.4.3 is skipped because it already exists at: D:\app\nodejs\node_global\node_modules\npm\node_modules\write-file-atomic
All packages installed (used 320ms(network 315ms), speed 0B/s, json 0(0B), tarball 0B)
[npm@6.14.4] link D:\app\nodejs\node_global\npm@ -> D:\app\nodejs\node_global\node_modules\npm\bin\npm-cli.js
[npm@6.14.4] link D:\app\nodejs\node_global\npx@ -> D:\app\nodejs\node_global\node_modules\npm\bin\npx-cli.js

升级完了 先不忙安装树形穿梭框，先npm run dev 启动下 项目看看能否启动

D:\project>npm  run  dev

 DONE  Compiled successfully in 49102ms                                                                                                                                                                                                                                                                          14:53:10

 I  Your application is running here: http://0.0.0.0:8080

没问题 那就开始安装吧。安装，结果报错了：

D:\project>npm i el-tree-transfer -S
npm ERR! Maximum call stack size exceeded

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\app\nodejs\node_cache\_logs\2020-04-07T06_46_36_964Z-debug.log

这个错以前遇到过，换个镜像应该就可以：

D:\project>cnpm i el-tree-transfer -S
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 3s(network 3s), speed 9.12kB/s, json 1(3.22kB), tarball 28.35kB)

安好了，下面再npm  run  dev启动一下：

2 初始效果 还需要调整。

3  效果调整和数据调整同步搞下就行，把数据从写死的改成从后台获取的即可

 

参考 达人 地址：https://www.jianshu.com/p/ec35a4b86e24