
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) {
// 檢查當(dāng)前節(jié)點(diǎn)是否為最后一級
return !node.data.children || node.data.children.length === 0;
},
addClass() {
// 獲取所有最后一級節(jié)點(diǎn)對應(yīng)的 .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; 的行內(nèi)樣式
childrenElement.style.display = 'inline-flex';
});
},
handleNodeExpand(){
this.$nextTick(()=>{
this.addClass()
})
}
},
async created () {
await this.getTreeData()
this.addClass()
}
}