Vue实现多级联动(扁平数组转树形数组)cascader

目录

Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：

扁平数组转树形数组公共方法

搭建界面HTML代码

JS代码

注解：

---

Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：

 

 

从上面数据，我们如何转化数据实现多级联动，如下图所示效果:

 

 

 

扁平数组转树形数组公共方法

 

  //论坛分类 扁平数组转树形数组
      Vue.prototype.forumTreeData = function (froum) {

          for (let i in froum) {
              froum[i].value = froum[i].fc_id;
              froum[i].label = froum[i].fc_name;
          }
          let temp = {};
          let ans = [];
          for (let i in froum) {
              temp[froum[i].value] = froum[i];

          }
          for (let i in temp) {
              if (temp[i].fc_fid != 0) {
                  if (!temp[temp[i].fc_fid].children) {
                      temp[temp[i].fc_fid].children = [];

                  }
                  temp[temp[i].fc_fid].children.push(temp[i]);
              } else {
                  ans.push(temp[i]);

              }
          }
          return ans;
      }

 

搭建界面HTML代码

 

 

JS代码

 

 

注解：

1、splite(' ')可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');

4.https://www.iviewui.com/components/cascader