vue-tree,vue自定义树形控件

　　这篇文章主要为大家详细介绍了某视频剪辑软件树形控件树的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件树形控件树使用的具体代码，供大家参考，具体内容如下

　　模板

　　你好树容器

　　埃尔树

　　:data=data

　　显示-复选框

　　node-key=id

　　 class=树

　　:allow-drop=allowDrop

　　:props=defaultProps

　　:default-expanded-keys=[2，3]

　　:default-checked-keys=[5]

　　/el-tree

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“HelloWorld”，

　　data () {

　　返回{

　　消息：欢迎使用您的vue . j应用程序 ,

　　数据：[{

　　id: 1，

　　标签: 一级2,

　　孩子：[{

　　id: 3，

　　标签: 二级2-1,

　　孩子：[{

　　id: 4，

　　标签: 三级3-1-1

　　}, {

　　id: 5，

　　标签: 三级3-1-2,

　　禁用：真

　　}]

　　}, {

　　id: 2，

　　标签: 二级2-2,

　　残疾人：真的，

　　孩子：[{

　　id: 6，

　　标签: 三级3-2-1

　　}, {

　　id: 7，

　　标签: 三级3-2-2,

　　残疾人：真的，

　　孩子：[{

　　id: 8，

　　标签: 二级8-1,

　　孩子：[{

　　id: 9，

　　标签: 三级3-1-1

　　}, {

　　id: 10，

　　标签: 三级3-1-2,

　　禁用：真

　　}]

　　}]

　　}]

　　}]

　　}],

　　defaultProps: {

　　//用于修改节点指定标签的属性值

　　孩子："孩子",

　　标签:"标签"

　　}

　　}

　　},

　　方法：{

　　allowDrop(draggingNode，dropNode，type) {

　　如果(拖动节点。父母。id===删除节点。父母。id){

　　返回类型！==下一个；

　　}否则{

　　返回真实的

　　}

　　}

　　}

　　}

　　/脚本

　　！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-

　　样式范围

　　/* 树形结构节点添加连线*/。树/深/。埃尔树节点{

　　位置：相对；

　　左填充：16px

　　}。树/深/。埃尔树节点_ _子节点{

　　左填充：12px

　　}。树/深/。埃尔树节点：最后一个子节点：之前{

　　高度：50px

　　}。树/深/。埃尔树节点：之前{

　　边框：无！重要；

　　}。树/深/。艾尔。特里100 . El树节点：之前{

　　左边界：无；

　　}。tree-container /deep/.艾尔。特里100 . El树节点：在{

　　边框顶部：无；

　　}。树/深/。埃尔树节点：之前{

　　内容："";

　　左：-4px；

　　位置：绝对；

　　右：自动；

　　边框宽度：1px

　　}。树/深/。埃尔树节点：在{

　　内容："";

　　左：-4px；

　　位置：绝对；

　　右：自动；

　　边框宽度：1px

　　}。树/深/。El树节点_ _展开图标。is-leaf {

　　显示：无；

　　}。树/深/。埃尔树节点：之前{

　　border-left:1px solid # b 8 b 9 bb；

　　底部：0px

　　身高：100%;

　　top:-26px；

　　宽度：1px

　　}。树/深/。埃尔树节点：在{

　　border-top:1px solid # b 8 b 9 bb；

　　高度：20px

　　top:24px；

　　宽度：20px

　　}。树/深/。埃尔树节点_ _展开图标{

　　显示：无；

　　}。树/深/。埃尔树节点_ _内容{

　　左填充：0!重要；

　　}。树/深/。埃尔树节点_ _内容{

　　高度：18px填充顶部：16px

　　}

　　/风格

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。