通达信dll接口理解-vue+element el tree 最详细的使用方法真实接口数据渲染

vue+element el tree 最详细的使用方法真实接口数据渲染

el-tree的使用：项目：接口给到的数据是嵌套children的，另外接口中的choose字段表示是否被选中，choose:true需要时选中状态；


        
菜单权限

接口的数据是树结构：嵌套children

{code: '2000', msg: '操作成功',…}
code: '2000'
data: [{id: 24, label: '项目管理', choose: false}, {id: 1, label: '系统管理', choose: false,…}]
0: {id: 24, label: '项目管理', choose: false}
1: {id: 1, label: '系统管理', choose: false,…}
   children: [{id: 3, label: '菜单管理', choose: false}, {id: 4,       label: '用户管理', choose: true},…]
  choose: false
  id: 1
  label: '系统管理'
  msg: '操作成功'

处理接口数据

 methods: {
    // 树结构列表
    async getTreeSelect() {
      const res = await this.$API.system.menu.treeSelect.post({roleId: this.form.roleId});
      this.menuList = res.data;  //   接口树结构的数据
      this.menuChoose = [];  //树结构中选中的项
      this.getMenuChoose(res.data)
    },
    // 递归
    getMenuChoose(children){
      for(let item of children){
          if(item.choose){  // item.choose == true表示被选中
            this.menuChoose.push(item.id);
          }
          if(item.children){
            this.getMenuChoose(item.children)
          }
        }
    },
      //点击选中的项
    menuTreeCheck(citem, status) {
      //citem当前点击的项， status勾选节点数据的数组
      const flag = new Set(status.checkedKeys).has(citem.id); //布尔值
      const self = this;
      const changeCheck = function (cld) {
        cld.forEach((i) => {
          self.$refs.menutree.setChecked(i.id, flag);  //setChecked（true）表示选中
          if (i.children) {
            changeCheck(i.children);
          }
        });
      };
      if (citem.children) {
        changeCheck(citem.children);
      }
    },
    }

文章为作者独立观点，不代表股票交易接口观点