<template>
<div>
<a-tree
:tree-data="treeData"
:replaceFields="{children:'children', title:'name', key:'data_id',slots:'slots' }"
@select="handleSelect"
selectable
>
<!-- 自定义折叠图标 -->
<!-- <template slot="switcherIcon">
<i class="icon-parent"></i>
</template> -->
<template slot="smile" slot-scope="item">
<span class="m-content-title">
{{item.name}}
<a-dropdown>
<a-icon type="more" class="m-content-icon" @click="e => e.preventDefault()"/>
<a-menu slot="overlay">
<a-menu-item
class="m-operate_icon_create_parent_son"
v-for="(item,index) in list.operateList"
:key="index"
@click="handleOperate(index)"
>{{item.label}}</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</template>
</a-tree>
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import {dataOperste as list} from '@/config/config-data'
export default {
data () {
return {
list,
treeData: [], // 目录树列表
nodeName: '', // 节点名称
nodeId: '' // 节点id
}
},
mounted () {
this.getTree()
},
methods: {
...mapMutations({
mutTreeId: 'DashBoard/mutTreeId',
mutTreeName: 'DashBoard/mutTreeName',
mutYbpId: 'DashBoard/mutYbpId'
}),
// 选中的节点展开对应的内容
handleSelect (key, event) {
// 注意 antd vue中tree组件a-directory-tree和a-tree事件返回值不同
this.nodeName = event.node.dataRef.name
this.nodeId = event.node.dataRef.data_id
console.log(this.nodeName, this.nodeId)
let node = event.node.dataRef
if (node.type === 1) {
this.mutTreeId(this.nodeId)
} else if (node.type === 2) {
this.mutTreeName(this.nodeName)
this.mutYbpId(this.nodeId)
}
this.getTree(node)
},
// 获取目录树
getTree (node) {
let resData = null
let id = node ? node.data_id : '0'
this.$API.getTreeData(id).then(res => {
resData = res.data.data
if (!node) {
let data = resData
for (let i = 0; i < data.length; i++) {
data[i].scopedSlots = { title: 'smile' }
resData = data
}
console.log(resData)
this.treeData = resData
} else if (node.type === 1) {
this.organizeData(this.treeData, node, resData)
} else {
this.organizeData(this.treeData, node, resData)
}
})
},
// 组织数据
organizeData (treeData, node, resData) {
for (let i = 0; i < treeData.length; i++) {
if (treeData[i].data_id === node.data_id) {
treeData[i].children = resData
// console.log(this.treeData)
this.$forceUpdate()
return false
} else {
if (treeData[i].children) {
this.organizeData(treeData[i].children, node, resData)
} else {
continue
}
}
}
},
// 目录树更多操作
handleOperate () {
}
}
}
</script>
<style lang="less" scoped>
.ant-tree /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
// width: 200px;
}
// title与图标样式
.m-content-title{
display: inline-block;
width: 200px;
// 父元素加hover后面跟子元素类名控制子元素样式
&:hover .m-content-icon{
color: #000000;
}
// background: red;
.m-content-icon{
font-size: 14px;
.mixin_percentage(margin-left,200,50);
color: #e8eaee;
}
}
</style>
父元素加hover后面跟子元素类名控制子元素样式
最新推荐文章于 2023-11-02 16:09:43 发布