image.png
<w-tree
ref="treeRef"
style="overflow: auto"
:props="defaultProps"
node-key="id"
show-checkbox
@check-change="handleCheckChange1"
:default-checked-keys="initChecked"
:data="treeData"
@node-expand="handleNodeExpand"
>
<!--插槽判断是否是最后一级-->
<template #default="{ node, data }">
<div v-if="isLastLevelNode(node)" class="last-level-node">
<span class="w-tree-node__label">{{ data.name }}</span>
</div>
<span v-else>{{ data.name }}</span>
</template>
</w-tree>
javascript
export default {
name: 'tree',
data () {
return {
defaultProps: {
label: 'name',
isLeaf: 'leaf',
children: 'children'
},
treeData: [],
selectChecked: [],
initChecked: [],
selectChecked1: []
}
},
methods: {
async getTreeData () {
return new Promise(async resolve => {
let menuRes = await this.$Api.getTree()
let { success = '', data = {} } = menuRes.data
if (success) {
let { jsxx = {}, checked = '', tree = [] } = data
this.jsxx = jsxx
let dataList = tree
resolve(dataList)
}
})
},
isLastLevelNode(node) {
// 检查当前节点是否为最后一级
return !node.data.children || node.data.children.length === 0;
},
addClass() {
// 获取所有最后一级节点对应的 .el-tree-node__children 元素
let allLastNode = document.querySelectorAll('.last-level-node')
allLastNode.forEach(function (element) {
// 获取 .el-tree-node__children 元素
const childrenElement = element.parentNode.parentNode;
// 添加 display: flex; 的行内样式
childrenElement.style.display = 'inline-flex';
});
},
handleNodeExpand(){
this.$nextTick(()=>{
this.addClass()
})
}
},
async created () {
await this.getTreeData()
this.addClass()
}
}