您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家分享的是有关vue树形控件tree怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
具体内容如下
<template> <div class="hello tree-container"> <el-tree :data="data" show-checkbox node-key="id" class="tree" :allow-drop="allowDrop" :props="defaultProps" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"> </el-tree> </div> </template>
<script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App|', data: [{ id: 1, label: '一级 2', children: [{ id: 3, label: '二级 2-1', children: [{ id: 4, label: '三级 3-1-1' }, { id: 5, label: '三级 3-1-2', disabled: true }] }, { id: 2, label: '二级 2-2', disabled: true, children: [{ id: 6, label: '三级 3-2-1' }, { id: 7, label: '三级 3-2-2', disabled: true, children: [{ id: 8, label: '二级 8-1', children: [{ id: 9, label: '三级 3-1-1' }, { id: 10, label: '三级 3-1-2', disabled: true }] }] }] }] }], defaultProps: { // 用于修改节点指定标签的属性值 children: 'children', label: 'label' } } }, methods: { allowDrop(draggingNode, dropNode, type) { if (draggingNode.parrent.id=== dropNode.parrent.id) { return type !== 'next'; } else { return true; } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> /* 树形结构节点添加连线 */ .tree /deep/ .el-tree-node { position: relative; padding-left: 16px; } .tree /deep/ .el-tree-node__children { padding-left: 12px; } .tree /deep/ .el-tree-node :last-child:before { height: 50px; } .tree /deep/ > .el-tree-node:before { border: none !important; } .tree /deep/ .el-tree > .el-tree-node:before { border-left: none; } .tree-container /deep/ .el-tree > .el-tree-node:after { border-top: none; } .tree /deep/ .el-tree-node:before { content: ""; left: -4px; position: absolute; right: auto; border-width: 1px; } .tree /deep/ .el-tree-node:after { content: ""; left: -4px; position: absolute; right: auto; border-width: 1px; } .tree /deep/ .el-tree-node__expand-icon.is-leaf { display: none; } .tree /deep/ .el-tree-node:before { border-left: 1px solid #b8b9bb; bottom: 0px; height: 100%; top: -26px; width: 1px; } .tree /deep/ .el-tree-node:after { border-top: 1px solid #b8b9bb; height: 20px; top: 24px; width: 20px; } .tree /deep/ .el-tree-node__expand-icon{ display: none; } .tree /deep/ .el-tree-node__content{ padding-left: 0 !important; } .tree /deep/ .el-tree-node__content { height: 18px;padding-top: 16px; } </style>
感谢各位的阅读!关于“vue树形控件tree怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。