Vue 实现查询凭证组下拉树结构

在Vue中，你可以使用以下代码来实现查询凭证组下拉树结构：

data() {
  return {
    voucherGroupOptions: []
  };
},
created() {
  this.getVoucherGroupFather();
},
methods: {
  getVoucherGroupFather() {
    // 调用接口获取凭证组数据
    // 假设返回的数据是一个数组，每个元素包含voucherGroupId、voucherGroupName和children字段
    // 示例数据如下：
    const apiResponse = [
      {
        voucherGroupId: 0,
        voucherGroupName: "顶级节点",
        children: [
          {
            voucherGroupId: 1,
            voucherGroupName: "子节点1",
            children: []
          },
          {
            voucherGroupId: 2,
            voucherGroupName: "子节点2",
            children: [
              {
                voucherGroupId: 3,
                voucherGroupName: "子节点2.1",
                children: []
              },
              {
                voucherGroupId: 4,
                voucherGroupName: "子节点2.2",
                children: []
              }
            ]
          }
        ]
      }
    ];

    // 处理接口返回的数据，构建下拉树结构
    this.voucherGroupOptions = this.buildTree(apiResponse);
  },
  buildTree(data) {
    const tree = [];
    
    // 遍历数据
    data.forEach(item => {
      // 复制item对象，避免直接修改原始数据
      const node = Object.assign({}, item);
      
      // 如果当前节点的children字段存在且不为空数组，则递归构建子树
      if (Array.isArray(node.children) && node.children.length > 0) {
        node.children = this.buildTree(node.children);
      } else {
        // 如果children字段不存在或为空数组，则删除该字段
        delete node.children;
      }
      
      tree.push(node);
    });
    
    return tree;
  }
}

在上述代码中，我们首先定义了一个voucherGroupOptions数组，用于存储查询到的凭证组下拉树结构数据。然后，在created生命周期钩子中调用了getVoucherGroupFather方法，该方法用于调用接口获取凭证组数据。

接口返回的数据是一个数组，每个元素包含voucherGroupId、voucherGroupName和children字段。我们通过buildTree方法处理接口返回的数据，构建下拉树结构。buildTree方法是一个递归方法，它会遍历数据，对每个节点进行处理。如果当前节点的children字段存在且不为空数组，则递归构建子树；否则，删除该字段。最后，返回构建好的树结构数组。

通过以上代码，你可以在Vue中实现查询凭证组下拉树结构的功能，并将结果存储在voucherGroupOptions数组中，供后续使用。