<template>
<div class="childmenu_container">
<div class="mytree">
<el-tree
:https://bbs.csdn.net/topics/data="data"
:props="defaultProps"
@node-click="handleNodeClick"
ref="tree"
node-key="id"
:indent="0"
:render-content="renderContent"
></el-tree>
</div>
<div class="show">
<div class="show-zi" v-for="(item,i) in titleList" :key="item.id">
<p>{{item.title}}</p>
<div v-for="(k,j) in item.childrenList" :key="k.id" style="margin-top:5px;" >
<input type="checkbox" />
<span>{{k.add}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Treebranch",
data() {
return {
titleList: [
/* {
title: '頁面1',
childrenList: [
{
add: '功能1-1'
},
{
add: '功能1-2'
}
]
}, */
],
data: [
{
id: 1,
label: "一級 1",
idlast: false,
children: [
{
id: 4,
label: "二級 1-1",
idlast: false,
children: [
{
id: 9,
label: "三級 1-1-1",
idlast: true
},
{
id: 100000,
label: "三級 1-1-2",
idlast: true,
},
]
}
]
},
{
id: 2,
label: "一級 2",
idlast: false,
children: [
{
id: 5,
label: "二級 2-1",
idlast: false,
children: [
{
id: 11,
label: "二級 2-1-1",
idlast: true
},
{
id: 12,
label: "二級 2-1-2",
idlast: true
}
]
},
{
id: 6,
label: "二級 2-2",
idlast: true
}
]
},
{
id: 3,
label: "一級 3",
idlast: false,
children: [
{
id: 7,
label: "二級 3-1",
idlast: true
},
{
id: 8,
label: "二級 3-2",
idlast: true
}
]
}
],
/* font: "el-icon-folder", */
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
handleNodeClick(data, e) {
var that = this
// console.log(data);
console.log(e);
let tree = this.$refs.tree;
/* e.checked = !e.checked; */
console.log(tree);
this.treeKey = ""; //初始化
this.breadList = []; //初始化
if (!e.groups) {
this.getTreeNode(tree.getNode(e.key));
this.treeKey = e.key;
this.treeGroupType = e.groupType;
console.log(this.breadList[this.breadList.length-1]);
var id = this.breadList[this.breadList.length-1] //下文生成右側div呼叫介面時所用的id
}
var ozi = document.getElementsByClassName("zi");
console.log(ozi);
var oipt = document.getElementsByClassName("ipt");
console.log(oipt);
for (let i = 0; i < ozi.length; i++) {
ozi[i].index = i;
ozi[i].onclick = function(e){
if (e && e.stopPropagation){
e.stopPropagation()
}else{
window.event.cancelBubble=true
}
console.log(ozi[this.index], "陳");
oipt[this.index].checked = !oipt[this.index].checked;
if (oipt[this.index].checked == true) {
console.log(id) //生成右側div呼叫介面時所用的id
let add = {
title: '頁面1',
childrenList: [
{
add: '功能1-1'
},
{
add: '功能1-2'
},
{
add: '功能1-2'
},
]
}
that.titleList.push(add)
} else{
that.titleList.splice(this.index,1)
}
};
}
},
getTreeNode(node) {
//獲取當前樹節點和其父級節點
if (node) {
if (node.label !== undefined) {
console.log(node.key)
this.breadList.unshift(node.key); //在陣列頭部添加元素
this.getTreeNode(node.parent); //遞回
}
}
},
renderContent: function(h, { node, data, store }) {
var createElement = arguments[0];
var level = arguments[1].node.level;
console.log(arguments[1].node.data);
if (node.data.idlast == false) {
return createElement("span", [
// createElement("i", { attrs: { class: "folder" } }),
/* */
createElement("span", arguments[1].node.label)
]);
} else {
return createElement("span", { attrs: {style:'background:#1d304c;color:white;padding:0 5px;border-radius:4px',class: "zi" } }, [
createElement("input", { attrs: { type: "checkbox",class: "ipt",style:'margin-right:5px' } }),
createElement("span", arguments[1].node.label)
]);
}
}
}
};
</script>
<style lang="scss" scoped>
.childmenu_container {
margin-top: 10px;
width: 150px;
min-height: 600px;
background: #fff;
display: flex;
}
.childmenu_container .zi{
background: #1d304c;
}
.childmenu_container .show {
display: flex;
overflow-x: auto;
height: 200px;
}
.childmenu_container .show-zi {
height:178px;
overflow-y: auto;
text-align: center;
width: 100px;
margin:10px 10px;
border-radius: 6px;
-moz-box-shadow:2px 2px 10px #ccc;
-webkit-box-shadow:2px 2px 10px #ccc;
box-shadow:2px 2px 10px #ccc;
padding: 0 10px;
}
.show-zi p{
border-bottom: 1px solid #cccccc;
height: 30px;
line-height: 30px;
}
.show-zi span{
margin-left: 5px;
}
.show-zi div{
color: white;
background-color: #1d304c;
border-radius: 4px;
}
.child_tit {
width: 135px;
padding-left: 15px;
font-size: 16px;
line-height: 26px;
padding-top: 14px;
background-color: #1d304c;
color: #fff;
}
.ipt {
width: 120px;
margin-left: 15px;
height: 35px;
box-sizing: border-box;
padding-top: 9px;
line-height: 26px;
border-bottom: 1px solid #1d304c;
}
.childmenu_search {
border: 0;
width: 86px;
font-size: 14px;
padding-left: 20px;
outline: none;
}
.ipt input::-webkit-input-placeholder {
color: #d0d3d8;
font-size: 14px;
}
.ipt input:-ms-input-placeholder {
color: #d0d3d8;
font-size: 14px;
}
.ipt input::-moz-placeholder {
color: #d0d3d8;
font-size: 14px;
}
.el-tree .el-icon-caret-right:before {
font-size: 25px;
}
.el-icon-search {
font-size: 14px;
}
.mytree /deep/ {
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node__children .child {
font-size: 12px !important;
}
/* .el-tree-node__content:hover {
color: #fff;
background: #fca311;
font-size: 14px;
width: 100%;
border-radius: 3px;
} */
.childmenu_container .el-tree-node__content {
height: 19px;
margin-top: 5px;
font-size: 14px;
line-height: 20px;
}
.el-tree {
margin: 0 10px;
}
.el-tree-node {
padding-left: 5px;
}
.custom-tree-node {
padding-left: 5px;
}
.el-tree-node {
position: relative;
}
.el-tree-node__children {
padding-left: 10px;
}
.el-tree-node :last-child:before {
height: 40px;
}
.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 #888;
bottom: 0px;
height: 100%;
top: -30px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #888;
height: 20px;
top: 10px;
width: 20px;
}
.folder {
padding: 10px;
background: url("../../assets/img/f-file-icon-active.png") no-repeat center;
background-size: 14px 12px;
}
.el-tree-node__content:hover .folder {
background: url("../../assets/img/f-file-icon.png") no-repeat center;
background-size: 14px 12px;
}
.document {
padding: 10px;
background: url("../../assets/img/page-hover.png") no-repeat center;
background-size: 10px 13px;
}
.el-tree-node__content:hover .document {
background: url("../../assets/img/page-default.png") no-repeat center;
background-size: 10px 13px;
}
.el-tree .el-icon-caret-right:before {
content: "\e6d9";
font-size: 20px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
content: "\e6d8";
font-size: 20px;
}
.el-tree-node__content .el-tree-node__expand-icon {
/* padding: 0; */
transform: scale(0.5);
}
}
</style>
uj5u.com熱心網友回復：
菜鳥求解答啊uj5u.com熱心網友回復：
1. title 過長，請在帖子內描述你的問題2. 貼的代碼請放入代碼標簽內，這樣有格式化，方便查看。
uj5u.com熱心網友回復：
用了vue就不應該再用原生js系結事件和操作DOM。那樣很容易出現意想不到的沖突問題。轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/124102.html
標籤：JavaScript