vue树形控件tree怎么用

发布时间:2022-03-30 12:20:14 作者:小新
来源:亿速云 阅读:211

这篇文章给大家分享的是有关vue树形控件tree怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

具体内容如下

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怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. ElementUI Tree树形控件怎么用
  2. 基于vue如何实现tree插件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue tree

上一篇:JavaScript中执行上下文和执行机制的示例分析

下一篇:vue如何实现粘贴复制功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》