102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div v-for="(item, index) in parentTreeData" :key="index" class="classifyButtonList">
|
||
|
|
<div flex="cross:center" flex-wrap style="height: 100%;">
|
||
|
|
<div class="title">
|
||
|
|
<!-- <i class="el-icon-caret-bottom" @click="showHidden(item, index)"></i> -->
|
||
|
|
<i v-if="item.children" :class="item.isShow?'el-icon-caret-top':'el-icon-caret-bottom'"@click="showHidden(item, index)"></i>
|
||
|
|
<!-- <el-checkbox v-model="item.checked">{{item.label}}</el-checkbox> -->
|
||
|
|
{{item.label}}
|
||
|
|
</div>
|
||
|
|
<div flex flex-wrap="cross:center" style="width: 79%;">
|
||
|
|
<p class="recordText" v-for="(el,index) in item.buttonList">{{el.NameCN}}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<menu-tree v-if="item.isShow && item.children" :parent-tree-data="item.children"></menu-tree>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "menuTree",
|
||
|
|
props: {
|
||
|
|
parentTreeData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 展开或者隐藏下级目录
|
||
|
|
showHidden(item, index) {
|
||
|
|
// this.parentTreeData.forEach(value => {
|
||
|
|
// // parentTreeData[i]的show属性不等于当前数据的isShow属性那么menuList[i]等于false
|
||
|
|
// if (value.isShow !== this.parentTreeData[index].isShow) {
|
||
|
|
// value.isShow = false;
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
item.isShow = !item.isShow;
|
||
|
|
this.$forceUpdate()
|
||
|
|
},
|
||
|
|
setCheck(menuIDs){
|
||
|
|
this.setButtonName(this.parentTreeData,menuIDs)
|
||
|
|
// this.$forceUpdate()
|
||
|
|
},
|
||
|
|
setButtonName(menuData,data) {
|
||
|
|
menuData.forEach((el, index) => {
|
||
|
|
data.forEach(item=>{
|
||
|
|
if (el.id == item) {
|
||
|
|
el.checked = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if (el.children != null && el.children && el.children.length) {
|
||
|
|
this.setButtonName(el.children,data)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
$activeColor: var(--bg-color, "#00aaff");
|
||
|
|
|
||
|
|
.el-icon-star-on {
|
||
|
|
/* color: #00aa00; */
|
||
|
|
color: $activeColor;
|
||
|
|
}
|
||
|
|
.recordText {
|
||
|
|
border: 1px solid #fff;
|
||
|
|
padding: 3px 10px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
cursor: pointer;
|
||
|
|
background: #f2f2f2;
|
||
|
|
color: #4e4e4e;
|
||
|
|
margin:5px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.recordText.active {
|
||
|
|
background-color: $activeColor;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tree-div {
|
||
|
|
|
||
|
|
}
|
||
|
|
.classifyButtonList{
|
||
|
|
// margin-bottom: 10px;
|
||
|
|
padding: 0 0 0 10px;
|
||
|
|
// cursor: pointer;
|
||
|
|
line-height: 25px;
|
||
|
|
.title{
|
||
|
|
// text-align: right;
|
||
|
|
// width: 20%;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|