Vue+ElementPlus+vxe-table下拉树点击全选节流操作

业务场景：

1、现在有的小伙伴用Vue3开发 会涉及到运用el-tree下拉树，来获取用户点击的结点，从而去获取相应结点的数据展示出来；

2.实现逻辑：获取下拉树被选中数据的id，通过id数组去调取后端接口，返回数据；

常规逻辑的弊端：

1.当点击多选时，会根据选中数据的数量去调取多次接口，造成网络资源浪费；

优化逻辑：

通过setTImeout来优化调取接口的次数，一般设置为800ms调取一次接口；保证此时el-tree全选或者多选操作时，所选数据已经完全渲染到页面上；通过“treeRef1.value.getCheckedKeys()”去获所选取数据时，得到的是全部的选择数据；

优化代码块：

//通过闭包创建函数内作用域变量，可以在函数外访问和保存；

const debounce = () => {

  let timerId;

  return (function(obj, status, tree) {

    clearTimeout(timerId);

    timerId = setTimeout(() => {

        carchange(obj, status, tree);

    }, 800);

  })

}

const checkCarChangeFn = debounce()

const carchange = async (obj, status, tree) => { //具体业务场景代码}

涉及到的知识点：
通过闭包函数来定时器函数；通过checkCarChangeFn 来保存定时器函数；

同时创建的timeerId会一直存在于函数作用域中，当点击事件触发是更新定时器函数；

由于el-tree组件的node-check方法会在点击下拉树checkbox的值改变时触发；所以当所有chechbox值更改之后；在调取接口。