Requirement: use elment, Tree tree control to make a custom node horizontal display
Make the left picture into the right picture effect:
process:
I put the json data at the end, if you need to test, you can take it
code:
<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: Using the above render-content method, if the first content under the same node needs Float, and the next content does not need Float, but the node of this content needs Float, the following situation will occur
Reason: Float will affect the next node, so the clear attribute should be added to the point that does not need floating, but through debugging, it is found that the point that does not need floating can not be located on the original tree structure, so the tree structure has to be changed
Eliminate bugs:
When viewing the document, I saw that the tree nodes can be customized, so I split the tree structure
<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>
then you can
Summary: 1. The Float attribute will affect the next node, so you have to add clear: both
2. The elment tree control { node, data } can customize the display data
3. Refresh in real time after rendering the page
JSON data:
{
"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
}
]
}
]
}
}