Avue form表单树形下拉选择（有无自定义根节点），处理下拉树再次下来无数据的问题

最新推荐文章于 2023-04-18 17:38:02 发布

m0_49573788

最新推荐文章于 2023-04-18 17:38:02 发布

阅读量385

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_49573788/article/details/128947228

版权

AVue form表单树形下拉选择（有无自定义根节点），处理下拉树再次下来无数据的问题

效果（无自定义根节点）

在这里插入图片描述

效果（有自定义根节点）

在这里插入图片描述

<avue-form :option="searchOption" v-model="searchForm" ref="searchFormTool">
</avue-form>

{
            label: '',
            prop: 'categoryId',
            type: 'tree',
            lazy: true,
            defaultExpandedKeys: ['summary'], //自定义根节点，默认展开根节点
            placeholder: this.$t('serviceCensusLang.categoryNameSelect'),
            props: {
              label: 'categoryName',
              children: 'children',
              value: 'id'
            },
            created: true,
            treeLoad: (node, resolve) => {
              if (node.level === 0) {
                //自定义根节点
                // resolve([{is_show: false,categoryName: this.$t('serviceCensusLang.nodeRootName'), id: 'summary'}])
                // return
                //不自定根节点（无根节点）
                getTypeTreeList({categoryPid: 'summary'}).then((res) => {
                  const dataRes = res.data.data;
                  resolve(dataRes.map(item => {
                    console.log('item',item)
                    return {
                      ...item,
                      leaf: item.haveChild == 0,
                    }
                  }))
                });
              }
              const dataParam = {
                categoryPid: node.data.id,
              }
              getTypeTreeList(dataParam).then((res) => {
                const dataRes = res.data.data;
                resolve(dataRes.map(item => {
                  console.log('item',item)
                  return {
                    ...item,
                    leaf: item.haveChild == 0,
                  }
                }))
              });
            },
          },

  watch: {
    'searchForm.categoryId': {
      handler(val) {
        /*处理下拉树再次下来无数据的问题*/
        this.$refs.searchFormTool.$refs.categoryId[0].$refs.temp.created = true
      }
    }
  },