<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>
Vue.js el-tree 组件:根据节点层级禁用新增按钮

原文地址: https://www.cveoy.top/t/topic/qfXk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录