Vue element树形控件添加虚线详解

目录
  • 1.实现效果
  • 2.实现代码
  • 3.其他实现
  • 总结

1.实现效果

2.实现代码

树形控件虚线的添加主要通过控制css来实现，并且在树形控件的缩进数只能为0，令class=“mytree”

   <div class="mytree">
          <!--indent只能为0-->
          <el-tree
              :data="tree_data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              indent="0"
              :render-content="renderContent"
          ></el-tree>
   </div>

css的设置为以下代码，使用了::v-deep进行样式穿透

<style lang="scss" scoped>
::v-deep .mytree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf{
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .el-tree-node :last-child:before {
    height: 38px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
</style>

3.其他实现

vue通过element树形控件实现树形表格

Element-ui实现树形控件节点添加图标

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

  • vue通过element树形控件实现树形表格

    vue通过element树形控件实现树形表格

    目录 实现效果图 安装依赖 自定义树形控件 其他实现 总结 在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果 代码主要通过renderContent函数来自定义树形控件 <template> <div class="mytree&

  • 详解vue-element Tree树形控件填坑路

    通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • Vue element树形控件添加虚线详解

    Vue element树形控件添加虚线详解

    目录 1.实现效果 2.实现代码 3.其他实现 总结 1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现,并且在树形控件的缩进数只能为0,令class="mytree" <div class="mytree"> <!--indent只能为0--> <el-tree :data="tree_data" :props="defaultProps" @node-click="

  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    一.JQuery树形控件 Jquery树形控件是一款基于JQuery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子.它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装. 1.一睹初容 全部收起 展开一级 全部展开 2.代码示例 此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可. <link href="~/Content/Tree1/

  • Vue表单控件绑定图文详解

    Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现. 1.基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. 2.Checkbox 单个勾选框,逻辑值: 3.多个勾选框,绑定到同一个数组: 4.动态选项,用 v-for 渲染: 5.值绑定 对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑

  • Vue表单控件数据绑定方法详解

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value.checked.selected特性的初始值.因为它会选择Vue实例数据来作为具体的值.应该通过JS组件的data选项中声明初始值 type:text <div id="example"> <input v-model="

  • VUE饿了么树形控件添加增删改功能的示例代码

    VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • 详解如何实现Element树形控件Tree在懒加载模式下的动态更新

    Element提供的Tree树形控件,可以用清晰的层级结构展示信息,还可以展开或折叠.Tree支持两种加载模式:一次性加载全部树节点和懒加载模式.所谓懒加载模式,是指当需要展开父节点时才渲染子节点.懒加载模式的应用场景适合树节点数据量大的情形,在一定程度上可以优化图形用户界面的响应效率以及提升用户体验.但是,懒加载模式对数据动态刷新应用需求的支持不尽如意.树形控件节点一旦展开就缓存在本地,后续不会再继续更新和刷新节点数据.本文将介绍如何实现Element树形控件Tree在懒加载模式下的动态更新.

  • Vue自定义树形控件使用详解

    Vue自定义树形控件使用详解

    本文实例为大家分享了Vue自定义树形控件的使用方法,供大家参考,具体内容如下 效果图: 数据结构: tree: { title: '', // 标题(姓名) key: '0', head: '', // 头像 selectStatus: false, // checkBox选中状态 children: [ { title: '旺旺一部', key: '0-0', head: '', selectStatus: false, children: [ { key: '0-0-0', title: '

  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    目录 需求说明: 实现步骤: 本文主要讲述:自定义树形控件<el-tree> 需求说明: Element UI 官网提供的树形控件包含基础的.可选择的.自定义节点内容的.带节点过滤的以及可拖拽节点的树形结构 如下: 我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面:并且在每个文件夹前添加自定义图标. 实现效果: 实现步骤: 1.使用插槽(slot) <el-col :span="4" :xs="24"> &

  • 解决ant design vue中树形控件defaultExpandAll设置无效的问题

    页面步骤: 1.设置a-tree标签 2.默认的treeNodes值设置为空数组 3.在mounted组件加载的时候给treeNodes的值赋值 结果: 设置defaultExpandAll无效,并不能展开所有节点 原因: defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为, 可以自行搜索受控组件/非受控组件的概念.如果你想异步获取数据后展开全部结点,可以使用非受控方式: https://codepen.io/lovefe

随机推荐