用element中的el-tree做横向显示遇到的bug

最新推荐文章于 2024-06-18 10:51:27 发布
最新推荐文章于 2024-06-18 10:51:27 发布
阅读量1.4k 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ferwagrea/article/details/124764031
版权

Element UI Tree组件 自定义渲染 CSS浮动 节点布局
关键词由CSDN通过智能技术生成

需求:使用elment ，Tree 树形控件做一个自定义节点横向显示

把左图做成右图效果：

过程:

json数据我放在最后了，有需要测试的可以拿去

代码：

<template>
  <section style="padding:10px;">
	<el-tree :data="testJsonData" show-checkbox default-expand-all node-key="nodeId" ref="tree"
	  highlight-current :default-checked-keys='checkeds' :props="defaultProps" @check="currentChecked" :render-content="renderContents">
	</el-tree>
  </section>
</template>

<script>

export default {
  data() {
    return {
	  testJson:[],
	  testJsonData:[],
	  defaultProps: {
	    children: 'children',
	    label: 'name'
	  },
	  checkeds: [],
    }
  },

  mounted() {
	//实时刷新函数
	this.$nextTick(() => {
	  this.changeCss();
	});
	//引用自己的json数据
	this.testJson = require('../../static/text.json');
	this.testJsonData=[this.testJson.data];
  },
  methods: {
	  renderContents(h, {node,data,store}) { //树节点的内容区的渲染 Function
	    let classname = "";
	    // 判断是否为权限点
	    if (data.isMenu ==false) {
	      classname = "authoritypoint";
	    }
	    return(
	      data.isMenu?<div classs={classname}>{data.name}</div>
	        : <el-tooltip effect='dark' placement='bottom-start' effect="light">
	          <div slot='content'>{data.remark}({data.nodeId})</div>
	          <div class={classname}>{data.name}</div>
	        </el-tooltip>
	    )
	  },
	  changeCss() {
	    var levelName = document.getElementsByClassName("authoritypoint"); // levelname是上面的最底层节点的名字
	    for (var i = 0; i < levelName.length; i++) {
	      // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
	      levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点，包括多选框和名字都让他左浮动
	      levelName[i].parentNode.style.styleFloat = "left";
	      levelName[i].parentNode.style.color = "blue";
	      levelName[i].parentNode.onmouseover = function() {
	        this.style.backgroundColor = "#fff";
	      };
	    }
	  },
	  //勾选的项
	  currentChecked() {
	    
	  },
  }
}
</script>

<style scoped>

</style>

Bug：用上面的render-content方法如果遇到在同一节点下首个内容是需要Float的，而下一个内容是不用Float的，但是这个内容的节点需要Float，就会出现下面这种情况

原因：Float会影响下一个节点，所以要在不需要浮动点加上clear属性，而通过调试发现在原有的树形结构上定位不到不需要浮动的点，所以得改变树形的结构

 消除Bug：

在查看文档的时候看到可以自定义树节点，于是我把树形结构拆分了

 

<template>
  <section style="padding:10px;">
	<el-tree :data="testJsonData" show-checkbox default-expand-all node-key="nodeId" ref="tree"
	  highlight-current :default-checked-keys='checkeds' :props="defaultProps" @check="currentChecked">
	  <div :id="data.nodeId" slot-scope="{ node, data }"
	    :class="data.isMenu ==false ? 'authoritypoint' : 'org'">
	    <div v-if="data.isMenu">{{ node.label }}</div>
	    <el-tooltip placement="bottom-start" effect="light" v-if="!data.isMenu">
	      <div slot="content">{{data.remark}}({{data.nodeId}})</div>
	      <div>{{ node.label }}</div>
	    </el-tooltip>
	  </div>
	</el-tree>
  </section>
</template>

<script>

export default {
  data() {
    return {
	  testJson:[],
	  testJsonData:[],
	  defaultProps: {
	    children: 'children',
	    label: 'name'
	  },
	  checkeds: [],
    }
  },

  mounted() {
	//实时刷新函数
	this.$nextTick(() => {
	  this.changeCss();
	});
	//引用自己的json数据
	this.testJson = require('../../static/text.json');
	this.testJsonData=[this.testJson.data];
  },
  methods: {
	  changeCss() {
	    var levelName = document.getElementsByClassName("authoritypoint"); // levelname是上面的最底层节点的名字
	    // console.log('levelName',levelName)
	    for (var i = 0; i < levelName.length; i++) {
	      // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
	      levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点，包括多选框和名字都让他左浮动
	      levelName[i].parentNode.style.styleFloat = "left";
	      levelName[i].parentNode.style.color = "blue";
	      levelName[i].parentNode.onmouseover = function() {
	        this.style.backgroundColor = "#fff";
	      };
	    }
	    var levelName = document.getElementsByClassName("org"); // levelname是上面的最底层节点的名字
	    // console.log('levelName',levelName)
	    for (var i = 0; i < levelName.length; i++) {
	      // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
	      levelName[i].parentNode.style.clear = "both"; // 清空Float属性
	    }
	  },
	  //勾选的项
	  currentChecked() {
	    
	  },
  }
}
</script>

<style scoped>

</style>

然后就可以了

总结：1.Float属性会影响下一个节点，所以得加clear：both

           2.elment树形控件 { node, data }可以自定义显示数据

           3.渲染页面后得实时刷新

json数据：

{
    "success": true,
    "code": 1,
    "msg": null,
    "data": {
        "nodeId": "AAAA.0",
        "parentId": null,
        "isMenu": true,
        "name": "系统管理",
        "menuNo": "AAAA",
        "permissionId": 0,
        "isPermit": false,
        "sortNo": 1,
        "remark": "",
        "children": [
            {
                "nodeId": "AAAAAA.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "用户管理",
                "menuNo": "AAAAAA",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 1,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAA1.0",
                        "parentId": "AAAAAA.0",
                        "isMenu": true,
                        "name": "人员管理",
                        "menuNo": "AAAAAA1",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAA1.1",
                                "parentId": "AAAAAA1.0",
                                "isMenu": false,
                                "name": "查看",
                                "menuNo": "AAAAAA1",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "查看用户",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAA1.2",
                                "parentId": "AAAAAA1.0",
                                "isMenu": false,
                                "name": "新增",
                                "menuNo": "AAAAAA1",
                                "permissionId": 2,
                                "isPermit": false,
                                "sortNo": 2,
                                "remark": "新增用户",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAA1.3",
                                "parentId": "AAAAAA1.0",
                                "isMenu": false,
                                "name": "修改",
                                "menuNo": "AAAAAA1",
                                "permissionId": 3,
                                "isPermit": false,
                                "sortNo": 3,
                                "remark": "修改用户",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAA1.4",
                                "parentId": "AAAAAA1.0",
                                "isMenu": false,
                                "name": "软删除/恢复",
                                "menuNo": "AAAAAA1",
                                "permissionId": 4,
                                "isPermit": false,
                                "sortNo": 4,
                                "remark": "软删除/恢复用户",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAA1.5",
                                "parentId": "AAAAAA1.0",
                                "isMenu": false,
                                "name": "更改他人密码",
                                "menuNo": "AAAAAA1",
                                "permissionId": 5,
                                "isPermit": false,
                                "sortNo": 5,
                                "remark": "拥有更改他人密码的权限",
                                "children": null
                            }
                        ]
                    },
                    {
                        "nodeId": "AAAAAA2.0",
                        "parentId": "AAAAAA.0",
                        "isMenu": true,
                        "name": "部门人员",
                        "menuNo": "AAAAAA2",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 2,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAA2.1",
                                "parentId": "AAAAAA2.0",
                                "isMenu": false,
                                "name": "查看",
                                "menuNo": "AAAAAA2",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "查看部门人员",
                                "children": null
                            }
                        ]
                    }
                ]
            },
            {
                "nodeId": "AAAAAB.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "组织架构",
                "menuNo": "AAAAAB",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 1,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAB.1",
                        "parentId": "AAAAAB.0",
                        "isMenu": false,
                        "name": "查看",
                        "menuNo": "AAAAAB",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看组织架构",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAB.2",
                        "parentId": "AAAAAB.0",
                        "isMenu": false,
                        "name": "新增",
                        "menuNo": "AAAAAB",
                        "permissionId": 2,
                        "isPermit": false,
                        "sortNo": 2,
                        "remark": "新增组织架构",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAB.3",
                        "parentId": "AAAAAB.0",
                        "isMenu": false,
                        "name": "修改",
                        "menuNo": "AAAAAB",
                        "permissionId": 3,
                        "isPermit": false,
                        "sortNo": 3,
                        "remark": "修改组职架构",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAB.4",
                        "parentId": "AAAAAB.0",
                        "isMenu": false,
                        "name": "软删除/恢复",
                        "menuNo": "AAAAAB",
                        "permissionId": 4,
                        "isPermit": false,
                        "sortNo": 4,
                        "remark": "软删除/恢复组织架构",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAB.5",
                        "parentId": "AAAAAB.0",
                        "isMenu": false,
                        "name": "查看/管理所有机构",
                        "menuNo": "AAAAAB",
                        "permissionId": 5,
                        "isPermit": false,
                        "sortNo": 5,
                        "remark": "查看/管理所有机构（即查看和所有管理机构及其部门、岗位）",
                        "children": null
                    }
                ]
            },
            {
                "nodeId": "AAAAAC.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "权限管理",
                "menuNo": "AAAAAC",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 3,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAC.1",
                        "parentId": "AAAAAC.0",
                        "isMenu": false,
                        "name": "查看",
                        "menuNo": "AAAAAC",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看权限",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAC1.0",
                        "parentId": "AAAAAC.0",
                        "isMenu": true,
                        "name": "角色权限设置",
                        "menuNo": "AAAAAC1",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAC1.2",
                                "parentId": "AAAAAC1.0",
                                "isMenu": false,
                                "name": "新增角色",
                                "menuNo": "AAAAAC1",
                                "permissionId": 2,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "新增角色",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAC1.3",
                                "parentId": "AAAAAC1.0",
                                "isMenu": false,
                                "name": "修改角色",
                                "menuNo": "AAAAAC1",
                                "permissionId": 3,
                                "isPermit": false,
                                "sortNo": 2,
                                "remark": "修改角色",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAC1.4",
                                "parentId": "AAAAAC1.0",
                                "isMenu": false,
                                "name": "删除角色",
                                "menuNo": "AAAAAC1",
                                "permissionId": 4,
                                "isPermit": false,
                                "sortNo": 3,
                                "remark": "删除角色",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAC1.5",
                                "parentId": "AAAAAC1.0",
                                "isMenu": false,
                                "name": "保存角色权限",
                                "menuNo": "AAAAAC1",
                                "permissionId": 5,
                                "isPermit": false,
                                "sortNo": 4,
                                "remark": "保存角色对应的权限",
                                "children": null
                            }
                        ]
                    },
                    {
                        "nodeId": "AAAAAC2.0",
                        "parentId": "AAAAAC.0",
                        "isMenu": true,
                        "name": "角色用户设置",
                        "menuNo": "AAAAAC2",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 2,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAC2.1",
                                "parentId": "AAAAAC2.0",
                                "isMenu": false,
                                "name": "保存角色用户",
                                "menuNo": "AAAAAC2",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "保存角色对应的用户",
                                "children": null
                            }
                        ]
                    }
                ]
            },
            {
                "nodeId": "AAAAAD.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "设置管理",
                "menuNo": "AAAAAD",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 4,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAD.1",
                        "parentId": "AAAAAD.0",
                        "isMenu": false,
                        "name": "查看",
                        "menuNo": "AAAAAD",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看设置信息",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAD1.0",
                        "parentId": "AAAAAD.0",
                        "isMenu": true,
                        "name": "个人设置",
                        "menuNo": "AAAAAD1",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAD1.1",
                                "parentId": "AAAAAD1.0",
                                "isMenu": false,
                                "name": "管理",
                                "menuNo": "AAAAAD1",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "管理自己的个人设置",
                                "children": null
                            }
                        ]
                    },
                    {
                        "nodeId": "AAAAAD2.0",
                        "parentId": "AAAAAD.0",
                        "isMenu": true,
                        "name": "工作站设置",
                        "menuNo": "AAAAAD2",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 2,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAD2.1",
                                "parentId": "AAAAAD2.0",
                                "isMenu": false,
                                "name": "查看",
                                "menuNo": "AAAAAD2",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "查看工作站设置",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAD2.2",
                                "parentId": "AAAAAD2.0",
                                "isMenu": false,
                                "name": "管理",
                                "menuNo": "AAAAAD2",
                                "permissionId": 2,
                                "isPermit": false,
                                "sortNo": 2,
                                "remark": "管理工作站设置",
                                "children": null
                            }
                        ]
                    },
                    {
                        "nodeId": "AAAAAD3.0",
                        "parentId": "AAAAAD.0",
                        "isMenu": true,
                        "name": "系统设置",
                        "menuNo": "AAAAAD3",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 3,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAD3.1",
                                "parentId": "AAAAAD3.0",
                                "isMenu": false,
                                "name": "查看",
                                "menuNo": "AAAAAD3",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "查看系统设置",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAD3.2",
                                "parentId": "AAAAAD3.0",
                                "isMenu": false,
                                "name": "管理",
                                "menuNo": "AAAAAD3",
                                "permissionId": 2,
                                "isPermit": false,
                                "sortNo": 2,
                                "remark": "管理系统设置",
                                "children": null
                            }
                        ]
                    },
                    {
                        "nodeId": "AAAAAD4.0",
                        "parentId": "AAAAAD.0",
                        "isMenu": true,
                        "name": "活动字典",
                        "menuNo": "AAAAAD4",
                        "permissionId": 0,
                        "isPermit": false,
                        "sortNo": 4,
                        "remark": "",
                        "children": [
                            {
                                "nodeId": "AAAAAD4.1",
                                "parentId": "AAAAAD4.0",
                                "isMenu": false,
                                "name": "查看",
                                "menuNo": "AAAAAD4",
                                "permissionId": 1,
                                "isPermit": false,
                                "sortNo": 1,
                                "remark": "查看用户字典",
                                "children": null
                            },
                            {
                                "nodeId": "AAAAAD4.2",
                                "parentId": "AAAAAD4.0",
                                "isMenu": false,
                                "name": "管理",
                                "menuNo": "AAAAAD4",
                                "permissionId": 2,
                                "isPermit": false,
                                "sortNo": 2,
                                "remark": "管理用户字典",
                                "children": null
                            }
                        ]
                    }
                ]
            },
            {
                "nodeId": "AAAAAE.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "操作日志",
                "menuNo": "AAAAAE",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 5,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAE.1",
                        "parentId": "AAAAAE.0",
                        "isMenu": false,
                        "name": "查看本机构",
                        "menuNo": "AAAAAE",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看本机构的日志",
                        "children": null
                    },
                    {
                        "nodeId": "AAAAAE.2",
                        "parentId": "AAAAAE.0",
                        "isMenu": false,
                        "name": "查看全部机构",
                        "menuNo": "AAAAAE",
                        "permissionId": 2,
                        "isPermit": false,
                        "sortNo": 2,
                        "remark": "查看全部机构的日志",
                        "children": null
                    }
                ]
            },
            {
                "nodeId": "AAAAAF.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "接口日志",
                "menuNo": "AAAAAF",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 6,
                "remark": "",
                "children": [
                    {
                        "nodeId": "AAAAAF.1",
                        "parentId": "AAAAAF.0",
                        "isMenu": false,
                        "name": "查看",
                        "menuNo": "AAAAAF",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看接口日志",
                        "children": null
                    }
                ]
            },
            {
                "nodeId": "AAAAAG.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "图标管理",
                "menuNo": "AAAAAG",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 7,
                "remark": "",
                "children": []
            },
            {
                "nodeId": "ZAAAAA.0",
                "parentId": "AAAA.0",
                "isMenu": true,
                "name": "博客测试",
                "menuNo": "ZAAAAA",
                "permissionId": 0,
                "isPermit": false,
                "sortNo": 100,
                "remark": "",
                "children": [
                    {
                        "nodeId": "ZAAAAA.1",
                        "parentId": "ZAAAAA.0",
                        "isMenu": false,
                        "name": "查看",
                        "menuNo": "ZAAAAA",
                        "permissionId": 1,
                        "isPermit": false,
                        "sortNo": 1,
                        "remark": "查看博客信息",
                        "children": null
                    }
                ]
            }
        ]
    }
}

pink味的草莓
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置el-tree组件横向排列显示
qq_38969618的博客
03-27 2792
/* 控制树形节点横向显示 */ .el-tree-node.is-expanded>.el-tree-node__children{ display:flex; flex-wrap: wrap; // flex横向布局换行显示 } /* 去除点击收缩图标时：横向显示的数据会先晃动成纵向显示的再收缩的现象*/ .collapse-transition{ transition:none !important; } ...
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 5556
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
Element Plus ----- el-tree 树型控件手动展开收起
最新发布
weixin_56300816的博客
06-18 401
但是默认展开后的树占用了非常大的空间，也会影响用户体验，于是我们可以增加一个按钮来控制树型结构的展开和收缩。可能会遇到数据太多导致树结构过长的情况，若用户想要查看所有的数据结点，则需要一个一个去展开，着实影响用户体验。这么简单的功能element官方应该会有API提供吧，但是当我们去官方文档中找时，发现根本没有这个API。这种情况我们可以用树形控件的 default-expand-all 属性，令其默认全部展开。但是当我们输出Tree组件时，可以发现其实是有控制节点展开或收起的属性的。
el-tree实现横向排列
weixin_41292470的博客
12-16 3066
el-tree部分按钮横向排列 1.自定义节点内容：render-content el-tree标签中添加： :render-content="renderContent" 2.添加两个方法 renderContent(h, { node, data }) { console.log(node, data) let classname = '' //1-导航；2-菜单；3-按钮 if (data.type == 3) { classname = 'levelname' } return
element-ui tree某些特定节点横向排列解决方案
coldriversnow的专栏
03-31 3625
先来个Element-UI的文档四连看 后端返回的数据 在这里可以看到普通节点和功能节点之间的区别是一个perms为空 一个是有数据的（我们可以用这个来区分节点），然后根据节点来改样式 主要代码 //修改节点Dom renderContent(h, { node, data }) { let className = '' // perms这个是后台数据区分普通tree节点和横向tree节点的标志 各位要根据...
element ui中tree的问题，改变最底层节点的样式，使他横着排列
weixin_51882162的博客
11-08 2425
element ui中tree的问题，改变最底层节点的样式，使他横着排列
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
HanXiaoXi_yeal的博客
08-11 6047
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
el-select-tree:ElementUI的el-select与el-tree结合
05-07
import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import ElSelectTree from 'el-select-tree' ; Vue . use ( ElSelectTree ) ; 组件内注册 import ElSelectTree from 'el-select-tree'...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
tree第三层节点横向排列.vue
06-18
这个是https://blog.csdn.net/qq_33769914/article/details/81562278?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159244480719724848325509%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=159244480719724848325509&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-81562278.pc_v2_rank_blog_default&utm_term=element-ui+tree我这个文章的代码。下载了放在自己的vue项目中看结果吧
VUE + element实现横向及纵向拓展
11-03
利用VUE和elementUI实现table表格的横向及总想拓展。可以根据按钮选择展开层级。
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
vue+element实现树状菜单并底层菜单横向排列
热门推荐
皮皮虾的博客
01-23 1万+
参考博文：https://blog.csdn.net/qq_33769914/article/details/81562278 效果如下： 首先用elemnetUI的树形控件，将获取到的数据进行基本展示。 其次给他添加底层样式。 最后根据获取到的某一属性将其勾选。 代码如下： 第一步： 获取数据： getRoleFunction(postData).then(response =&amp;gt; { ...
el-tree 解决横向滚动条和纵向滚动条问题
qq_59224836的博客
12-28 1387
el-tree 解决横向滚动条和纵向滚动条问题，添加overflow: visible;样式即可
el-tree组件中当节点内容超过长度显示横向滚动条的问题
linhuchong_blog的专栏
12-23 2361
参考 el-tree显示横向滚条的问题 问题描述 最近的项目使用Element-UI作为前端UI框架时，借助el-tree组件实现树形菜单时，父容器规定了宽高，设置overflow:auto,但是当节点显示的文本超过定义的长度时，横向滚动条并未显示； 解决方案 出现该问题的原因是el-tree组件中class名为el-tree-node的div是块级元素，需要把它变为inline-block，,所以覆盖element的样式： .el-tree { width: 100%; ove.
el-element el-tree超出宽度显示横向滚动条问题(已解决)
mia0303的博客
02-20 4926
el-element el-tree超出宽度显示横向滚动条问题-已解决页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条没加之前的样式加过之后的样式解决方法 在css里加上这样一段如果没有生效的话就在el-tree外面加个class为**的盒子 页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条 参考链接 https://github.co
vue组件横向树实现
若晨工作室
08-01 7700
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue 代码： &lt;template&gt; &lt;div class="tree"&gt; &lt;ul v-if="treeData &amp;&amp; treeData.length"&gt; &lt;li v-for=
element plus el-tree
08-27
- *3* [(el-Tree)操作(不使用 ts)：Element-plus 中Tree 树形控件的样式等的使用](https://blog.csdn.net/weixin_43405300/article/details/131175218)[target="_blank" data-report-click={"spm":"1018.2226.3001....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值