Vue-easy-tree封装及使用

1.使用及安装

下载依赖
npm install @wchbrad/vue-easy-tree

引入俩种方案
1.在main.js中引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
Vue.use(VueEasyTree)

2.当前页面引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

2.封装vue-easy-tree

3.具体页面该如何使用

1.data中定义
    organizationTree: [],
    treeLoading: true, //控制人员树加载状态
    releaseTreeProps: {
      value: "nodeIdAndType",
      label: "nodeName",
      children: "organizationTreeUserSingeNodeList",
      checkStrictly: false,
    },
    addCaseForm: {
      copyToUserListName:'',
      copyToUserList:[], //抄送人
    }
2.引入及注册
   import SelectMutipleTree from "@/components/selectMutipleTree";
   components:{SelectMutipleTree }
3.接口中写
    接口名字().then((response) => {
      const { data, success } = response;
      if (success) {
        this.organizationTree = data;
        this.treeLoading = false;
      } else {
        this.organizationTree = [];
        this.treeLoading = false;
      }
    }).catch((error) => {
        this.organizationTree = [];
        this.treeLoading = false;
    });
4.方法
    handleCheck(checkedData) {
      if (checkedData.length > 0) {
        // 集合
        var namesArr = [];
        var idsArr = [];
        var userName = [];
        checkedData.forEach((f) => {
          if (f.nodeType !== 0) {
            namesArr.push(f.nodeName);
            idsArr.push(f.nodeId)
            userName.push({
              id: f.nodeId,
              name: f.nodeName,
            });
          }
        });
        this.addCaseForm.copyToUserListName = namesArr.join(";");
        this.addCaseForm.copyToUserList = idsArr;
      } else {
        this.addCaseForm.copyToUserListName = '';
        this.addCaseForm.copyToUserList = [];
      }
    },
    

 5.具体返回的后台格式