tree组件点击请求了多次接口?

作者站长头像
站长
· 阅读数 26

引入子组件

<CheckTreee @nodeClicked="nodeClicked"></CheckTreee>

子组件中获取选中的id

<el-tree
  ref="treesRef"
  style="max-width: 600px"
  :data="dataTree"
  node-key="id"
  :props="defaultProps"
  show-checkbox
  :expand-on-click-node="false"
  @check-change="handleClick"
/>

let checkID = ref<any[]>([]);
const handleClick = async (node: any, isCheck: any) => {
  if (isCheck) {
    checkID.value.push(node.id);
  } else {
    checkID.value.forEach((item, i) => {
      if (item === node.id) {
        checkID.value.splice(i, 1);
      }
    });
  }
  emit("nodeClicked", checkID);
};

///根据id取调用接口查数据

const nodeClicked = (val: any) => {
  selectData.type = val.value.join(",");
  getData(selectData);
};

tree组件点击请求了多次接口?

回复
1个回答
avatar
test
2024-06-19

方法一:

   // 引入防抖函数,如lodash的debounce
   import { debounce } from 'lodash';

   // 在父组件中定义防抖处理的nodeClicked方法
   const debouncedNodeClicked = debounce(nodeClicked, 300); // 延迟时间可以根据需求调整

   // 修改子组件引用,使用防抖后的回调函数
   <CheckTreee @nodeClicked="debouncedNodeClicked" />
   

方法二:

   // 子组件中引入一个定时器和一个临时变量存储待发送的节点ID
   let timer: NodeJS.Timeout | null = null;
   let pendingNodeIds: any[] = [];

   const handleClick = async (node: any, isCheck: any) => {
     if (isCheck) {
       checkID.value.push(node.id);
       pendingNodeIds.push(node.id);
     } else {
       checkID.value.forEach((item, i) => {
         if (item === node.id) {
           checkID.value.splice(i, 1);
         }
       });
       pendingNodeIds = pendingNodeIds.filter(id => id !== node.id);
     }

     clearTimeout(timer); // 清除之前的定时器
     timer = setTimeout(() => {
       // 在延迟时间后触发nodeClicked事件,发送请求
       emit("nodeClicked", pendingNodeIds);
       pendingNodeIds = []; // 重置待发送节点ID列表
     }, 300); // 延迟时间可以根据需求调整
   };
   
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容