vue递归函数｜树形结构或者权限使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue递归函数｜树形结构或者权限使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

👉vue获取到树形结构后递归遍历数据，生成树形结构数据，无限级_vue遍历树形数据_常威在打来福~的博客-CSDN博客

需求是：三级联动数据，获取到的数据也是树形结构的，需要不停的往下循环，但是又不确定是几层，那么这样需要用到递归方法。

代码实现：文章来源地址https://www.toymoban.com/news/detail-455679.html

//1、三级联动，elementui官网中只能单选，多选是用不了的，所以只能用另一个插件来进行多选,先下载包
npm install ele-multi-cascader

//2、在main.js中引用和使用
import elCascaderMulti from "el-cascader-multi";
Vue.use(elCascaderMulti);

//3、vue页面template
<el-collapse accordion>
   <el-collapse-item v-for="item in usersTree" :key="item.id">
     <template slot="title">
       标题啦<i class="header-icon el-icon-info"></i>
     </template>
     <el-cascader-multi v-model="checkList" :data="item.children" filterable> 
     </el-cascader-multi>
   </el-collapse-item>
</el-collapse>


//4、vue页面的data
data () {
	return {
		usersTree: []
	}
}

//5、vue页面的methods
methods {
	organizManage () {
      //  从后台获取树形结构数据
      this.axios.get('system/organizManage/tree').then(res => {
          if (res.code === '0') {
              this.usersTree = res.data
              this.usersTree.forEach(item => {
                  if (item.children.length > 0) {
                  	  // 即：this.digui(item);在这地方添加的
                      item.children.forEach(items => {
                          // 下面的就是执行递归的方法，因为我是从第二层才开始需要往下挖的，
                          // 所以这里多了个forEach,如果从第一层起，从item就好了，
                          // 即：this.digui(item);在上面添加
                          this.digui(items); 
                          // 这里是源头，把一个对象开始递归，开始循环
                          // 如果想看完整数据，那么是在这里打印数据哦
                          console.log(items, '看我查看完整的数据哦')
                          // 因为上一步递归时，就已经把循环children的动作做完了，这里是验收递归方法的地方。
                      })
                  } else {
                      // 如果第一层没有子项做的操作。。。。。
                  }
              })
          } else {
              this.$message.error(res.message);
          }
      });
  },
  digui (item) {
  	  // 一层一层往下面执行，循环，直到不满足情况的条件下，
      // 会自动跳出这个递归方法，然后又到上面方法的源头处，开始执行下一个对象。。。
      if (item.children.length > 0) {
          item.value = item.orgCode
          item.label = item.orgName
          // 因为三级联动的数据格式是value和label,所以需要自己手动添加，没有的忽略。
          item.children.forEach(ff => {
          	  // 这里就是判断他的children下面还有没有值，有的话我就要往下挖，就又开始自己调用自己了
              this.digui(ff)
          })
      }  else {
      	   // 这里就是判断，如果我这一层的children下面没有东西的时候该做什么操作 
          item.value = item.orgCode
          item.label = item.orgName 
          // 要添加value和label,否则会看不到标签名字和值
          // --------------------------分割线---------------------------------
          // 下面部分是我的需求，如果他的chilren下面没有值，
          // 那么发送请求获取本层数据下有没有值，没有children就是空，有的话，就把值push进他的children。这里看自己需求
          let form = {
              orgCode: item.orgCode,
              orgName: item.orgName,
              pageNum: 1,
              pageSize: 100000,
              companyId: item.companyId
          }
          this.store.dispatch('system/usersManage/list', form).then(res => {
              if (res.code === '0') {
                  if (res.data.list.length > 0) {
                      for (var i = 0; i < res.data.list.length; i++) {
                          res.data.list[i].value = res.data.list[i].userId
                          res.data.list[i].label = res.data.list[i].userName
                          item.children.push(res.data.list[i])
                      }
                  }
              }
          });
      }
      // 到这里为止，不能在这里打印数据，不然数据就是个断层的，
      // 因为在这里打印的数据是当前循环的这一层的数据，如果想看完整数据效果，
      // 那么就需要在递归方法第一次调用的地方打印需要递归的值，即上一个方法中。
  },
}

到了这里，关于vue递归函数｜树形结构或者权限使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！