vue Treeselect的使用

之前在写后台管理的系统的时候，需要做一个树形下拉框，但是在element中找了很久，老大都不是很满意，最后误打误撞碰到了vue Treeselect， 这也算是一种缘分吧
在后台关系统中很多时候需要用到权限分配的功能，而我做的这个权限分配就是用到了vue Treeselect，下面就简单记录一下我是怎么使用的：
话不多少，先把官网的地址扔到这：https://vue-treeselect.js.org/

第一步：

安装依赖的包 npm install --save @riophae/vue-treeselect

第二步：

引入需要的包

import Treeselect from "@riophae/vue-treeselect";

import "@riophae/vue-treeselect/dist/vue-treeselect.css";

注册组件

第三步：

在页面中放入，组件

 <treeselect
            v-model="editForm.parentCode"
            :multiple="false"
            :options="categoryTreeData"   //数据存放
            placeholder="请选择上级分类"     
            :disabled="disabledForm.parentCode"   //应该是自动清除
            style="width: 200px"
          />

 categoryTreeData: [],  //数据存放
 disabledForm:{
        parentCode:false,
      },

第四步：

接下来就是要从后来获取数据，渲染到树形下拉框里面

因为后台给我的数据和treeselect需要的数据不太一样，所以我是自己对数据进行修改

    //加载分类树
    loadCategoryTree(){
        this.$axios
        .get(this.$baseUrl + "/goods/category/listTree")
        .then(res => {
          this.categoryTreeData = res.data.data;
          this.categoryTreeAddLabel(this.categoryTreeData);
        });
    },
    //添加树名称
    categoryTreeAddLabel(tree) {
      for (let i in tree) {
        tree[i].id = tree[i].code;
        tree[i].label = tree[i].name;
        if (tree[i].children != null) {
          this.categoryTreeAddLabel(tree[i].children);
        }
      }
      console.log(this.categoryTreeData);
    },

接下来就是大功告成了

其实这个东西也很简单，下包，引包，注册组件，获取数据，嗯，就是这样的 BD