{"versions":{"0.1.0":{"name":"element-tree-line","version":"0.1.0","author":{"name":"zougt","email":"zgtusers@outlook.com"},"description":"给element-ui和element-plus的el-tree组件添加结构线的子组件","homepage":"https://github.com/GitOfZGT/element-tree-line","bugs":{"url":"https://github.com/GitOfZGT/element-tree-line/issues"},"main":"dist/index.js","module":"dist/index.es.js","typings":"dist/index.d.ts","keywords":["element-ui","element-plus","el-tree","tree-line","component","vue2","vue3"],"scripts":{"_postinstall":"husky install","prepublishOnly":"pinst --disable","postpublish":"pinst --enable","prepublish":"npm run build","dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js"},"dependencies":{},"peerDependencies":{"vue":"^2.6.11 || ^3.2.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@commitlint/cli":"^13.1.0","@commitlint/config-conventional":"^13.1.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.1","@rollup/plugin-node-resolve":"^13.0.2","@types/babel__core":"^7.1.16","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^6.2.2","fs-extra":"^10.0.0","glob":"^7.2.0","husky":"^7.0.1","lint-staged":"^11.1.1","pinst":"^2.1.6","prettier":"^2.3.2","rimraf":"^3.0.2","rollup":"^2.53.3","rollup-plugin-scss":"^3.0.0","rollup-plugin-terser":"^7.0.2","sass":"~1.32.12","vue":"^2.6.11","yamljs":"^0.3.0"},"license":"MIT","eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended","@vue/prettier"],"parserOptions":{"parser":"babel-eslint"},"rules":{"max-lines":["warn",{"max":400}],"max-params":["error",{"max":3}]}},"lint-staged":{"*.{js,vue,jsx}":["prettier --write","git add"]},"publishConfig":{"registry":"https://registry.npmjs.org"},"gitHead":"a7a438621b9c8c00a0e0be0678095474c9028fbb","_id":"element-tree-line@0.1.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-yx0AGcf9n+zXjjUqjLkfcZc2o4KWHfSAcHJSw5QMiNy4FMUAz+hDTEFPVwvrPjuCLJk70xr8iLZ4UXeJsvCUHQ==","shasum":"4b21906a55bbabbe542c1751daae330a3e95c8a6","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/element-tree-line/-/element-tree-line-0.1.0.tgz","fileCount":8,"unpackedSize":25107,"size":6617},"_npmUser":{"name":"anonymous","email":"zgtusers@outlook.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"zgtusers@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-tree-line_0.1.0_1635570726183_0.6684698681726939"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-28T00:14:57.216Z","contributors":[]},"0.2.0":{"name":"element-tree-line","version":"0.2.0","author":{"name":"zougt","email":"zgtusers@outlook.com"},"description":"给element-ui和element-plus的el-tree组件添加结构线的子组件","homepage":"https://github.com/GitOfZGT/element-tree-line","bugs":{"url":"https://github.com/GitOfZGT/element-tree-line/issues"},"main":"dist/index.js","module":"dist/index.es.js","typings":"dist/index.d.ts","keywords":["element-ui","element-plus","el-tree","tree-line","component","vue2","vue3"],"scripts":{"_postinstall":"husky install","prepublishOnly":"pinst --disable","postpublish":"pinst --enable","prepublish":"npm run build","dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js"},"dependencies":{},"peerDependencies":{"vue":"^2.6.11 || ^3.2.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@commitlint/cli":"^13.1.0","@commitlint/config-conventional":"^13.1.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.1","@rollup/plugin-node-resolve":"^13.0.2","@types/babel__core":"^7.1.16","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^6.2.2","fs-extra":"^10.0.0","glob":"^7.2.0","husky":"^7.0.1","lint-staged":"^11.1.1","pinst":"^2.1.6","prettier":"^2.3.2","rimraf":"^3.0.2","rollup":"^2.53.3","rollup-plugin-scss":"^3.0.0","rollup-plugin-terser":"^7.0.2","sass":"~1.32.12","vue":"^2.6.11","yamljs":"^0.3.0"},"license":"MIT","eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended","@vue/prettier"],"parserOptions":{"parser":"babel-eslint"},"rules":{"max-lines":["warn",{"max":400}],"max-params":["error",{"max":3}]}},"lint-staged":{"*.{js,vue,jsx}":["prettier --write","git add"]},"publishConfig":{"registry":"https://registry.npmjs.org"},"gitHead":"7b8b173c1e66ad820081cc1478866fc7e372460c","_id":"element-tree-line@0.2.0","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-MCXy7I5QkyPl5MvLM68AkpxiZJaXNn3/aTIoUmC9Rc+ZqzdpTw9kgK/vUNcaa/rBf/Tg4lF4I6VgTHRwkxVs+g==","shasum":"bb770518ca2a5702fb65878041b0fa40b1827de6","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/element-tree-line/-/element-tree-line-0.2.0.tgz","fileCount":8,"unpackedSize":30789,"size":7918},"_npmUser":{"name":"anonymous","email":"zgtusers@outlook.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"zgtusers@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-tree-line_0.2.0_1635583366840_0.2498627226565462"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2021-12-28T00:14:58.092Z","contributors":[]},"0.2.1-alpha":{"name":"element-tree-line","version":"0.2.1-alpha","author":{"name":"zougt","email":"zgtusers@outlook.com"},"description":"给element-ui和element-plus的el-tree组件添加结构线的子组件","homepage":"https://github.com/GitOfZGT/element-tree-line","bugs":{"url":"https://github.com/GitOfZGT/element-tree-line/issues"},"main":"dist/index.js","module":"dist/index.es.js","typings":"dist/index.d.ts","keywords":["element-ui","element-plus","el-tree","tree-line","component","vue2","vue3"],"scripts":{"_postinstall":"husky install","prepublishOnly":"pinst --disable","postpublish":"pinst --enable","prepublish":"npm run build","dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js"},"dependencies":{},"peerDependencies":{"vue":"^2.6.11 || ^3.2.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@commitlint/cli":"^13.1.0","@commitlint/config-conventional":"^13.1.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.1","@rollup/plugin-node-resolve":"^13.0.2","@types/babel__core":"^7.1.16","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^6.2.2","fs-extra":"^10.0.0","glob":"^7.2.0","husky":"^7.0.1","lint-staged":"^11.1.1","pinst":"^2.1.6","prettier":"^2.3.2","rimraf":"^3.0.2","rollup":"^2.53.3","rollup-plugin-scss":"^3.0.0","rollup-plugin-terser":"^7.0.2","sass":"~1.32.12","vue":"^2.6.11","yamljs":"^0.3.0"},"license":"MIT","eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended","@vue/prettier"],"parserOptions":{"parser":"babel-eslint"},"rules":{"max-lines":["warn",{"max":400}],"max-params":["error",{"max":3}]}},"lint-staged":{"*.{js,vue,jsx}":["prettier --write","git add"]},"publishConfig":{"registry":"https://registry.npmjs.org"},"gitHead":"7fd2a32e5ca079afcdd6e1ef79b0c125aabf1c4a","_id":"element-tree-line@0.2.1-alpha","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7UNTNDmvBTuE4y+s2DBJTjjeNLua6g4WUc+9EBKD6MWEqmZP7P8WYUM8ua5wbgzAMADFDCNpr7Tp3mTwWKzFog==","shasum":"48157dd37e2194ff6a4cc2846b0cf1025b6c072b","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/element-tree-line/-/element-tree-line-0.2.1-alpha.tgz","fileCount":8,"unpackedSize":31407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxyN9ncEAXo/3CEH5C5YyWwApG2OegENi0GRrVEPCKOAIgLqyiTYxuxa1EhSpNiS2VQ7QayoUY6V+ixBG98DJDpiA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizUo0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxEA/+MxOpOxx9gpvMkULCBWnknyz1t0yZklirBx4hXmHqLnZB+zEk\r\n3wI+D+WPDlnGfiMjYLsm/xWsBtYkG6BxXXoQpWffz8O5j+dd38xj7d4h2+8+\r\nHIC2v7vMiE8lAKNBkOGxopIevxkKI73fNRknM+bNMIvb/nuLa+IlDFRe+22w\r\ns+mdOfYDJWfTcM/a9+fqqwTfVAUrPY++xyeIBHvqMEsRlxFQKLp/wnbSE1nx\r\nO0I/Y2fzXiSpJzztQNU/o6lvgmTz9i2TQoSNbpNe/kH7leqYQ1n75QsQcWfB\r\ntV6GOoQ7zz2fCiF6nkWbgH0iCBjHAWfxdxwp7TV/VvYlSqcZ3sgEpCFm84b2\r\n4eJM4Tzrmqaxtm0iw/azozf8h0boRpJdW55mcgwB2bB0N7FsJF+ls5LJlwHO\r\nBU34ttJ3lbehc2ve9Z/8OdfwEEF11VVUaYmnAqemal1c+d6mAnlhrB62ALg7\r\ngR2AYSfjeFxCOZL9OD96P9Gvfl4FuyCFE+QH2sOF6ODHBj25f+qV0h0eLPKs\r\nJgiDk8HcnVjCdH6r9PxVTljD8yLVnXhyxyb21yZVpuMge3WaI5MC9B4W9urF\r\n7eKJzOTUTF8jCpAkTEGYPP/xfZDnH3GI4J/2ry7y2/IiuZum9DzhTocptxjE\r\n9zP/ChXzXV9M+mVjtuh6fs4IgTfOsqs2nr4=\r\n=rTsb\r\n-----END PGP SIGNATURE-----\r\n","size":8126},"_npmUser":{"name":"anonymous","email":"zgtusers@outlook.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"zgtusers@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-tree-line_0.2.1-alpha_1657621044274_0.29617756687160757"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-07-12T12:00:52.832Z","contributors":[]},"0.2.1":{"name":"element-tree-line","version":"0.2.1","author":{"name":"zougt","email":"zgtusers@outlook.com"},"description":"给element-ui和element-plus的el-tree组件添加结构线的子组件","homepage":"https://github.com/GitOfZGT/element-tree-line","bugs":{"url":"https://github.com/GitOfZGT/element-tree-line/issues"},"main":"dist/index.js","module":"dist/index.es.js","typings":"dist/index.d.ts","keywords":["element-ui","element-plus","el-tree","tree-line","component","vue2","vue3"],"scripts":{"_postinstall":"husky install","prepublishOnly":"pinst --disable","postpublish":"pinst --enable","prepublish":"npm run build","dev":"rollup -c rollup.config.js -w","build":"rollup -c rollup.config.js"},"dependencies":{},"peerDependencies":{"vue":"^2.6.11 || ^3.2.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/preset-env":"^7.15.8","@commitlint/cli":"^13.1.0","@commitlint/config-conventional":"^13.1.0","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-commonjs":"^19.0.1","@rollup/plugin-node-resolve":"^13.0.2","@types/babel__core":"^7.1.16","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","babel-plugin-import":"^1.13.3","eslint":"^6.7.2","eslint-plugin-prettier":"^3.3.1","eslint-plugin-vue":"^6.2.2","fs-extra":"^10.0.0","glob":"^7.2.0","husky":"^7.0.1","lint-staged":"^11.1.1","pinst":"^2.1.6","prettier":"^2.3.2","rimraf":"^3.0.2","rollup":"^2.53.3","rollup-plugin-scss":"^3.0.0","rollup-plugin-terser":"^7.0.2","sass":"~1.32.12","vue":"^2.6.11","yamljs":"^0.3.0"},"license":"MIT","eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/essential","eslint:recommended","@vue/prettier"],"parserOptions":{"parser":"babel-eslint"},"rules":{"max-lines":["warn",{"max":400}],"max-params":["error",{"max":3}]}},"lint-staged":{"*.{js,vue,jsx}":["prettier --write","git add"]},"publishConfig":{"registry":"https://registry.npmjs.org"},"gitHead":"7fd2a32e5ca079afcdd6e1ef79b0c125aabf1c4a","_id":"element-tree-line@0.2.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-YWHftDSOFiBuw49drxJV7Yi7pCqPpwBBBeQmySjchcxU3uUOAu72FDLK5RyTGJ5qt4Ci+yoUg7zJqsFP5u7N5A==","shasum":"91bcb872f44c156132d61848bc5f5810ca19bc84","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/element-tree-line/-/element-tree-line-0.2.1.tgz","fileCount":8,"unpackedSize":31401,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPb2WwdMcoETN1Hz7E4sLLyq6n2eKbYKCPJWwwv10EtQIgN/nkPUK4cX3P2kBrzhdjjxM+PMVuTSGWQ16wZM1Hkn4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGxI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmVg//bUeTNGPiXy5UfsY3y2nQdoTSV//BlhkiI5SSjQA4mB1vrLWe\r\n2PBjj7xZFUghu1mv3LjgOZ8zELTyPwWXrPlsvng2IXBTW0j8AAAu2/NL2ucr\r\nPIpxWBpVM0J10aOx0A0VSod+du70wdFeW8CVDgt8N6/ViG8G5zuHK91Ad75u\r\nDjfBxX+HK5L18t6/Wwo7m5JBsOjJOUPvjDk66LoLPdpfQerMDWhUIqtes71s\r\nK+cRkzfrAO9Mx/iH1jNSGJDzMj68QySFtd4vGmljnNgrdbudYZD96Kqai7by\r\nOpGgoewa0DbCYMyB1driByMMNDOGSUMhKJqL7wFKeAGxSg8ezJ//yi8m3o6V\r\nuiCOWtNUVsgSKTFzb14cB/x/KAF1MkyB2eI6KmE5nggabxaXBOkPjW7zscvV\r\nZrSNP4cKSiFy8vOcBPsWei8t9URX/PGIIT/Hs2L4euLLqun7i/jIonC8voql\r\nuNkrb07qlHX9+zr/1KeeaG1UfsirgRh6LxPlEGfXVmVVMijaVGec0JvPFMMI\r\ntJLaA9A3Rza5O7KccWO47JYlk+VZhcBC6t/SZk4XUXQVkN/mjHRCFmEw5ECG\r\nYiXVvt35RXRrBzwL5b+SaJEs4XvEkTdJM/RBQbGagxgbC3NzYjP3bMcu7LkE\r\nCZRMqMvJacQdeAc5hF4Wi/Ptj4h8CeChafg=\r\n=FJgQ\r\n-----END PGP SIGNATURE-----\r\n","size":8121},"_npmUser":{"name":"anonymous","email":"zgtusers@outlook.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"zgtusers@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/element-tree-line_0.2.1_1662718521654_0.14767839785918313"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-09-09T12:10:58.145Z","contributors":[]}},"dist-tags":{"latest":"0.2.1"},"name":"element-tree-line","time":{"created":"2022-01-28T01:18:40.300Z","modified":"2022-09-09T12:11:02.106Z","0.1.0":"2021-10-30T05:12:06.308Z","0.2.0":"2021-10-30T08:42:46.996Z","0.2.1-alpha":"2022-07-12T10:17:24.457Z","0.2.1":"2022-09-09T10:15:21.871Z"},"readme":"# element-tree-line\n\n![example](https://img-blog.csdnimg.cn/1c4fe0d00871471b9ac628d2ad11961f.png)\n\n这是一个给 [element-ui](https://element.eleme.io/#/zh-CN/component/tree)和[element-plus](https://element-plus.gitee.io/zh-CN/component/tree.html)的 `el-tree` 添加结构线的子组件，不会对 `el-tree` 原有的功能造成任何的影响，同时能够支持[element-plus 的 Virtualized Tree 虚拟树](https://element-plus.org/zh-CN/component/tree-v2.html)，有了线的展示，从美观和树形结构清晰上都有很好的体现。（我总是在做不是很重要的东西，哈哈）\n\n## 安装与使用\n\n```bash\n# npm\nnpm install element-tree-line -S\n\n# yarn\nyarn add element-tree-line -S\n\n```\n\n### Used in vue2 + element-ui\n\n```js\n// 全局注册组件\nimport Vue from 'vue';\nimport ElementTreeLine from 'element-tree-line';\n// css\nimport 'element-tree-line/dist/style.css';\n// or scss\n// import 'element-tree-line/dist/style.scss';\n\nVue.component(ElementTreeLine.name, ElementTreeLine);\n```\n\n```js\n// or 局部注册组件\nimport ElementTreeLine from 'element-tree-line';\n// css\nimport 'element-tree-line/dist/style.css';\n// or scss\n// import 'element-tree-line/dist/style.scss';\n\nexport default {\n    components: { ElementTreeLine },\n    data() {\n        return {};\n    },\n};\n```\n\n**案例效果**\n\n![element-ui-tree](https://img-blog.csdnimg.cn/9ed720cb7146457581bd2565cdf2fc25.gif)\n\n```html\n<template>\n    <el-card shadow=\"never\" :body-style=\"{ padding: '20px 0px 20px 20px' }\">\n        <div style=\"margin-bottom: 10px\">\n            <span style=\"margin-right: 5px\">showLabelLine</span>\n            <el-switch v-model=\"treeProps['showLabelLine']\"></el-switch>\n            <span style=\"margin-left: 20px;margin-right:5px;\">indent</span>\n            <el-input-number v-model=\"treeProps['indent']\"></el-input-number>\n        </div>\n        <el-tree\n            ref=\"tree\"\n            :data=\"data\"\n            draggable=\"\"\n            show-checkbox\n            node-key=\"id\"\n            :default-expanded-keys=\"[2, 3]\"\n            :default-checked-keys=\"[5]\"\n            :props=\"defaultProps\"\n            :indent=\"treeProps['indent']\"\n        >\n            <template v-slot:default=\"{ node }\">\n                <element-tree-line\n                    :node=\"node\"\n                    :showLabelLine=\"treeProps['showLabelLine']\"\n                    :indent=\"treeProps['indent']\"\n                >\n                    <!-- 自定义label的slot -->\n                    <template v-slot:node-label>\n                        <span style=\"font-size: 12px\">\n                            {{ node.label }}\n                            <i class=\"el-icon-eleme\"></i\n                        ></span>\n                    </template>\n                    <!-- 在右边追加内容的slot -->\n                    <template v-slot:after-node-label>\n                        <span style=\"padding-right: 10px\">\n                            <el-button\n                                type=\"primary\"\n                                size=\"mini\"\n                                @click.stop=\"openDrawer(node)\"\n                                >新增子节点</el-button\n                            >\n                            <el-button\n                                type=\"primary\"\n                                size=\"mini\"\n                                @click.stop=\"openDrawer(node)\"\n                                >修改</el-button\n                            >\n                            <el-button\n                                type=\"danger\"\n                                size=\"mini\"\n                                @click.stop=\"openDialog\"\n                                >删除</el-button\n                            ></span\n                        >\n                    </template>\n                </element-tree-line>\n            </template>\n        </el-tree>\n    </el-card>\n</template>\n<script>\n    import ElementTreeLine from 'element-tree-line';\n    import 'element-tree-line/dist/style.css';\n    export default {\n        components: { ElementTreeLine },\n        data() {\n            return {\n                treeProps: {\n                    indent: 16,\n                    showLabelLine: true,\n                },\n                data: [\n                    {\n                        id: 1,\n                        label: '一级 1',\n                        children: [\n                            {\n                                id: 4,\n                                label: '二级 1-1',\n                                children: [\n                                    {\n                                        id: 9,\n                                        label: '三级 1-1-1',\n                                    },\n                                    {\n                                        id: 10,\n                                        label: '三级 1-1-2',\n                                    },\n                                ],\n                            },\n                            {\n                                id: 9000,\n                                label: '二级 1-2',\n                            },\n                        ],\n                    },\n                    {\n                        id: 2,\n                        label: '一级 2',\n                        children: [\n                            {\n                                id: 5,\n                                label: '二级 2-1',\n                            },\n                            {\n                                id: 6,\n                                label: '二级 2-2',\n                            },\n                        ],\n                    },\n                    {\n                        id: 3,\n                        label: '一级 3',\n                        children: [\n                            {\n                                id: 7,\n                                label: '二级 3-1',\n                            },\n                            {\n                                id: 8,\n                                label: '二级 3-2',\n                            },\n                        ],\n                    },\n                ],\n                defaultProps: {\n                    children: 'children',\n                    label: 'label',\n                },\n            };\n        },\n    };\n</script>\n<style>\n    .el-tree-node__content {\n        padding-top: 5px;\n        padding-bottom: 5px;\n    }\n</style>\n```\n\n### Used in vue3 + element-plus\n\n```js\n// 全局注册组件\nimport { createApp, h } from 'vue';\nimport { getElementLabelLine } from 'element-tree-line';\n// css\nimport 'element-tree-line/dist/style.css';\n// or scss\n// import 'element-tree-line/dist/style.scss';\n\n// 创建一个Vue 应用\nconst app = Vue.createApp({});\n// 全局注册ElementLabelLine\nconst ElementLabelLine = getElementLabelLine(h);\napp.component(ElementLabelLine.name, ElementLabelLine);\n```\n\n```js\n// or 局部注册组件\nimport { getElementLabelLine } from 'element-tree-line';\n// css\nimport 'element-tree-line/dist/style.css';\n// or scss\n// import 'element-tree-line/dist/style.scss';\nimport { h } from 'vue';\nexport default {\n    components: { ElementTreeLine: getElementLabelLine(h) },\n    data() {\n        return {};\n    },\n};\n```\n\n**案例效果**\n\n![element-plus-tree](https://img-blog.csdnimg.cn/ba78e064d88046b39b15d1f6bff68279.gif)\n\n```html\n<template>\n    <el-tree\n        :data=\"data\"\n        show-checkbox\n        node-key=\"id\"\n        draggable\n        :default-expanded-keys=\"[2, 3]\"\n        :default-checked-keys=\"[5]\"\n        :props=\"defaultProps\"\n        :indent=\"treeIndent\"\n        ><template v-slot:default=\"{ node }\">\n            <element-tree-line\n                :node=\"node\"\n                :showLabelLine=\"true\"\n                :indent=\"treeIndent\"\n            >\n                <template v-slot:node-label>\n                    <span style=\"font-size: 12px\">\n                        {{ node.label }}\n                        <el-tag type=\"danger\" size=\"mini\">Tag 5</el-tag>\n                    </span>\n                </template>\n                <template v-slot:after-node-label>\n                    <span style=\"padding-right: 10px\">\n                        <el-button size=\"mini\">按钮</el-button>\n                    </span>\n                </template>\n            </element-tree-line>\n        </template>\n    </el-tree>\n</template>\n<script>\n    import { getElementLabelLine } from 'element-tree-line';\n    import 'element-tree-line/dist/style.css';\n    import { h } from 'vue';\n    export default {\n        components: { ElementTreeLine: getElementLabelLine(h) },\n        data() {\n            return {\n                treeIndent: 30,\n                data: [\n                    {\n                        id: 1,\n                        label: 'Level one 1',\n                        children: [\n                            {\n                                id: 4,\n                                label: 'Level two 1-1',\n                                children: [\n                                    {\n                                        id: 9,\n                                        label: 'Level three 1-1-1',\n                                    },\n                                    {\n                                        id: 10,\n                                        label: 'Level three 1-1-2',\n                                    },\n                                ],\n                            },\n                        ],\n                    },\n                    {\n                        id: 2,\n                        label: 'Level one 2',\n                        children: [\n                            {\n                                id: 5,\n                                label: 'Level two 2-1',\n                            },\n                            {\n                                id: 6,\n                                label: 'Level two 2-2',\n                            },\n                        ],\n                    },\n                    {\n                        id: 3,\n                        label: 'Level one 3',\n                        children: [\n                            {\n                                id: 7,\n                                label: 'Level two 3-1',\n                            },\n                            {\n                                id: 8,\n                                label: 'Level two 3-2',\n                            },\n                        ],\n                    },\n                ],\n                defaultProps: {\n                    children: 'children',\n                    label: 'label',\n                },\n            };\n        },\n    };\n</script>\n<style>\n    .el-tree-node__content {\n        padding-top: 5px;\n        padding-bottom: 5px;\n    }\n</style>\n```\n\n### Used in element-plus Virtualized Tree 虚拟树\n\n**案例效果**\n\n![element-plus-tree-v2](https://img-blog.csdnimg.cn/25c53e1f77dd4ed39a7e40f7b73e0edf.gif)\n\n```html\n<template>\n    <el-tree-v2\n        :data=\"treeData\"\n        :props=\"props\"\n        :indent=\"treeIndent\"\n        :height=\"400\"\n    >\n        <template v-slot:default=\"{ node }\">\n            <element-tree-line\n                :node=\"node\"\n                :treeData=\"treeData\"\n                :showLabelLine=\"true\"\n                :indent=\"treeIndent\"\n            >\n            </element-tree-line>\n        </template>\n    </el-tree-v2>\n</template>\n<script lang=\"ts\">\n    import { defineComponent, ref } from 'vue';\n    import { getElementLabelLine } from 'element-tree-line';\n    import 'element-tree-line/dist/style.css';\n    import { h } from 'vue';\n    const getKey = (prefix, id) => {\n        return `${prefix}-${id}`;\n    };\n\n    const createData = (\n        maxDeep,\n        maxChildren,\n        minNodesNumber,\n        deep = 1,\n        key = 'node'\n    ) => {\n        let id = 0;\n        return new Array(minNodesNumber).fill(deep).map(() => {\n            const childrenNumber =\n                deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);\n            const nodeKey = getKey(key, ++id);\n            return {\n                id: nodeKey,\n                label: nodeKey,\n                children: childrenNumber\n                    ? createData(\n                          maxDeep,\n                          maxChildren,\n                          childrenNumber,\n                          deep + 1,\n                          nodeKey\n                      )\n                    : undefined,\n            };\n        });\n    };\n    export default defineComponent({\n        components: { ElementTreeLine: getElementLabelLine(h) },\n        setup() {\n            return {\n                treeData: createData(4, 30, 40),\n                treeIndent: 40,\n                props: ref({\n                    id: 'id',\n                    label: 'label',\n                    children: 'children',\n                }),\n            };\n        },\n    });\n</script>\n```\n\n### ElementLabelLine Props\n\n| 参数          | 说明                                                                                                                                                                      | 类型    | 可选值 | 默认值 |\n| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | :----: | ------ |\n| node          | 由[el-tree 的 default slot](https://element-plus.gitee.io/zh-CN/component/tree.html#slots) 提供的作用域参数 node，**必填**。                                              | object  |   -    | -      |\n| showLabelLine | 是否显示 label 的横线                                                                                                                                                     | boolean |   -    | false  |\n| treeData      | 对应[element-plus 的 el-tree-v2](https://element-plus.org/zh-CN/component/tree-v2.html#attributes) 的 data，**当用在 element-plus 的 el-tree-v2 时，treeData 是必填的**。 | array   |   -    | -      |\n| indent        | 相邻级节点间的水平缩进，单位为像素 ; 对应[el-tree 的 indent](https://element-plus.gitee.io/zh-CN/component/tree.html#attributes)。                                        | number  |   -    | 16     |\n\n### ElementLabelLine Slots\n\n| 插槽名称         | 说明                   |\n| ---------------- | ---------------------- |\n| node-label       | 自定义 label 区域      |\n| after-node-label | 追加在 label line 之后 |\n\n### 修改线的样式\n\n如果使用的是scss，可以覆盖scss变量修改线的颜色\n\n```scss\n$--element-tree-line-color: #dcdfe6;\n$--element-tree-line-style: dashed;\n$--element-tree-line-width: 1px;\n@import 'element-tree-line/dist/style.scss';\n```\n\n## 对比其他方式\n\n在做 ElementLabelLine 之前，看 element-ui issues 有不少人提到 el-tree 结构线的需求，官方依然没有支持，有搜索到一些直接覆盖 el-tree 的 css 做法，在节点缩进、点击行效果、拖拽等方面没有很贴合的效果，并不是我想要的\n\n![css-cover-example](./images/css-cover-example.png)\n\nElementLabelLine 作为 el-tree 子组件的方式，无侵入性，可插拔，很优雅的添加结构线。","users":{}}