想做一个树形穿梭框的效果,看了下当前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 效果调整和数据调整同步搞下就行,把数据从写死的改成从后台获取的即可