element tree组件连接线以及懒加载

简介: element tree组件连接线以及懒加载

<el-tree highlight-current :indent="0"  default-expand-all :data="treelist" class="tree-line" ref="tree" node-key="id"  
      :props="defaultProps"  @node-click="nodeClick"  :expand-on-click-node="false"  lazy :load="loadNode">
      <!-- 插槽 -->
      <span class="custom-tree-node" slot-scope="{data}">
      <!-- 设置icon图标 -->
        <span>
          <i class="el-icon-folder"></i>
        </span>
        <span v-if="!data.id">
          <i class="el-icon-document"></i>
        </span>
        <span>
          {{ data.fvAreaName }}
        </span>
      </span>
    </el-tree>

default-expand-all为节点数默认全部展开,懒加载适用

<script>
import bus from '@/utils/eventBus.js'
import { TableAPI} from '@/api/valuation/my_valuation.js'
  export default {
    props: {
      treelist: Array,
      ShowSave: Boolean,
      taskInfo : Object
    },
    data() {
      return {
       treelist:[],
      };
    },
    computed: {
    },
    created() {
    },
    mounted() {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      // 该节点为真实选中的节点,不包含半勾选的上级节点
      nodeClick(data) {
        console.log(data,'节点点击');
      },
     // 刷新列表
     getTable() {
      // 初始化列表...
      TableAPI(this.params).then(el=>{
        })
     },
     // 获取选择的节点数组
      handleCheckChange(click, checked,index){
        // this.$refs.tree.setCheckedKeys([click.id]); // 只允许选择一个节点
        console.log('选择的节点',click,checked,index);
      },
      // 懒加载层级
      loadNode(node, resolve) {
        const id = node.data.id
        // 通过node.level的层级判断点击的是第几层
        if (node.level === 1) {
            CityAPI({id : this.taskInfo.taskId, provinceId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)
            })
        } else if (node.level === 2) {
            DistrictAPI({id : this.taskInfo.taskId, cityId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 3) {
            SubdistrictAPI({id : this.taskInfo.taskId, districtId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)   // 返回最新节点数据
            })
        } else if (node.level === 4) {
            CommunityAPI({id : this.taskInfo.taskId, subdistrictId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: false
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } else if (node.level === 5) {
            CompoundAPI({id : this.taskInfo.taskId, communitytId : id}).then(el=>{
                const childNodes = el.data.map(item => ({
                    fiLevel : item.fiLevel,
                    fvAreaName : item.fvAreaName,
                    id : item.id,
                    leaf: true  // 通过leaf判断是否有下一层级
                }))
                resolve(childNodes)  // 返回最新节点数据
            })
        } 
      }
    }
  };
</script>

利用css配置tree节点虚线

<style lang="scss">
// 点击选中的tree节点样式
.organization_configuration {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    color: #409eff; // 节点的字体颜色
    background: transparent;
  }
}
// tree连接线
.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__content {
    margin-top: 10px;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .el-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -1px;
    top: -22px;
    border-width: 1px;
    border-left: 1px dashed #c0c4cc;
  }
  .el-tree-node:last-child::before {
    height: 33px;
  }
  .el-tree-node::after {
    content: '';
    width: 30px;
    height: 20px;
    position: absolute;
    left: 1px;
    top: 11px;
    border-width: 1px;
    border-top: 1px dashed #c0c4cc;
  }
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }
  .el-tree-node__expand-icon {
    font-size: 18px;
    // color: #000;
    &.is-leaf {
      color: transparent;
      // display: none;
    }
  }
}
</style>

设置tree节点的连接线需要在tree组件上配置 :index = 0 ; 初始化节点的距离,否则节点的连接线位置会偏移,配置完成后使用上面的css样式即可,before伪元素为Y轴、after伪元素为X轴连接线。

另外

tree点击激活和失焦后的样式调整,如果上面的方法失效可以用这个

<style scoped lang='scss'>
  /* 改变被点击节点背景颜色,字体颜色 */
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
  /*节点失焦时的背景颜色*/
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
    background-color: #4a9de7 !important;
    color: #fff !important;
  }
</style>
目录
打赏
0
0
0
0
4
分享
相关文章
VUE element-ui之table表格自增序号(前端实现)
VUE element-ui之table表格自增序号(前端实现)
1964 0
|
11月前
|
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
2269 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
11月前
|
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
7483 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
3121 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
2756 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
11月前
|
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
3003 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
1978 1
Vue3项目使用G6可视化组件实现一个树形机构图
如何巧妙实现element-plus中el-tree-v2的自适应横向滚动?
以上方法描述了如何使用简单的CSS和合适的HTML结构来巧妙实现在Element Plus库中 `el-tree-v2` 组件的自适应横向滚动功能。这种方法易于理解和实现,无需复杂的脚本或框架修改,只需利用CSS的强大功能即可完成。这有助于节省开发时间,同时能够提供良好的用户体验。
559 0
|
11月前
|
在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件
在Vue 3和Element Plus项目中实现具有懒加载功能的el-tree树形控件,以优化大数据量时的页面性能。
2063 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问