Vue.js el-tree 组件:根据节点层级禁用新增按钮
<template>
<el-card class="leftsearch">
<el-tree style="font-size: 14px;" :data="treeData" :props="defaultProps" node-key="categoryId" default-expand-all
@node-click="handleClick" />
</el-card>
<div class="flex justify-between" style="margin-bottom: var(--el-card-padding);">
<span class="font-bold"> 数据列表</span>
<el-button type="success" plain @click="openDialog()" :disabled="disableAddButton"><i-ep-plus />新增</el-button>
</div>
</template>
<script>
export default {
data() {
return {
disableAddButton: false, // 初始状态为可用
// 其他数据...
};
},
methods: {
handleClick(ev, node) {
console.log('ev', ev);
console.log('node', node.level);////是第几层,如果是1 就把新增按钮隐藏disabled
console.log('ev.categoryId 点击的这个类目id是----', ev.categoryId);
loading.value = true;
queryParams2.categoryId = ev.categoryId;
getSpecsPage(queryParams2)
.then((data: any) => {
SpecsList.value = data.rows;
total.value = data.total; //页
})
.finally(() => {
loading.value = false;
});
// 判断node.level是否为1,如果是则禁用新增按钮
if (node.level === 1) {
this.disableAddButton = true;
} else {
this.disableAddButton = false;
}
},
// 其他方法...
},
};
</script>
原文地址: https://www.cveoy.top/t/topic/qfXk 著作权归作者所有。请勿转载和采集!