el-tree load方法添加参数

293 阅读1分钟

在 el-tree 组件中,可以通过传递函数的额外参数来实现在 load 方法中添加参数的目的。你可以在 :load 中传递一个匿名函数,这个匿名函数调用 loadTreeData 方法并传递额外的参数。在 loadTreeData 方法中,可以通过添加多个参数来接收这些额外的参数。

例如:

<el-tree :data="treeData" :load="(node, resolve) => loadTreeData(node, resolve, param1, param2, param3)" ></el-tree>

此处我们通过一个箭头函数来实现传递额外参数的目的,箭头函数首先接收当前节点 node,接着调用 loadTreeData 方法并传递其他额外的参数 param1param2param3 等等,这些参数可以根据实际业务需求自定义。在 loadTreeData 方法中,我们可以通过添加这些额外的参数来进行异步请求。

例如:

loadTreeData(node, param1, param2, param3) {
  // 利用额外参数构造请求路径
  const url = `/data/${param1}/${param2}/${param3}`;

  // 通过路径异步请求新的节点数据
  axios.get(url).then((response) => {
    // 请求成功后将节点数据作为 Promise 的参数传递给 resolve()
    const res = response.data
    const data = res.data
    node.children = data
    resolve(data)
  });
}

在这个例子中,我们新增了三个参数 param1param2param3,根据这些参数构建请求路径,然后异步请求新的节点数据。请求成功后,我们将节点数据作为 Promise 的参数传递给 resolve() 方法,使异步操作得到完成并渲染新的节点数据。