Vue.js 组件中动态控制按钮禁用状态的实现方法

数据列表

新增

const disableAddButton = ref(false) ; function 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; }); console.log('node~node', node.level);////是第几层，如果是1 就把新增按钮隐藏disabled

// 判断node.level是否为1，如果是则禁用新增按钮

if (node.level == 1) { this.disableAddButton = true; console.log('this.disableAddButton==', this.disableAddButton);

  } else {
    this.disableAddButton = false;
  }

} 要求：点击这个handleClick，判断如果 node.level=1，就禁用新增 <el-button type="success" plain @click="openDialog()"> 新增按钮内容：可以通过将disableAddButton定义为响应式的ref属性，并在handleClick中根据node.level的值来改变disableAddButton的值，从而控制新增按钮的禁用状态。

首先，在组件的setup函数中引入ref，并定义disableAddButton：

import { ref } from 'vue';

const disableAddButton = ref(false);

然后，在handleClick函数中判断node.level的值，根据条件来改变disableAddButton的值：

function handleClick(ev, node) {
  // ...
  
  // 判断node.level是否为1，如果是则禁用新增按钮
  if (node.level === 1) {
    disableAddButton.value = true;
  } else {
    disableAddButton.value = false;
  }
}

最后，在模板中将disableAddButton绑定到新增按钮的disabled属性上：

<el-button type="success" plain @click="openDialog()" :disabled="disableAddButton"><i-ep-plus />新增</el-button>

这样，当node.level为1时，新增按钮将被禁用。