vue+ ant 之树形数据的转化

• 抄袭，不不不转载于 https://blog.csdn.net/weixin_37930465/article/details/97772584
• 后端返回的数据
  
• 假设的后端返回数据

[{
	"id": 82,
	"name": "管理员模块",
	"type": "group",
	"client": [{
		"id": 83,
		"name": "管理员管理",
		"type": "contro",
		"client": [{
			"id": 84,
			"name": "管理员列表",
			"type": "action"
		}, {
			"id": 85,
			"name": "添加页",
			"type": "action"
		}, {
			"id": 86,
			"name": "添加",
			"type": "action"
		}, {
			"id": 87,
			"name": "详情",
			"type": "action"
		}, {
			"id": 88,
			"name": "编辑页",
			"type": "action"
		}, {
			"id": 89,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 90,
			"name": "删除",
			"type": "action"
		}]
	}, {
		"id": 91,
		"name": "节点管理",
		"type": "contro",
		"client": [{
			"id": 92,
			"name": "节点列表",
			"type": "action"
		}, {
			"id": 93,
			"name": "添加页面",
			"type": "action"
		}, {
			"id": 94,
			"name": "添加",
			"type": "action"
		}, {
			"id": 95,
			"name": "详情",
			"type": "action"
		}, {
			"id": 96,
			"name": "编辑页面",
			"type": "action"
		}, {
			"id": 97,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 98,
			"name": "删除",
			"type": "action"
		}]
	}, {
		"id": 99,
		"name": "角色管理",
		"type": "contro",
		"client": [{
			"id": 100,
			"name": "角色列表",
			"type": "action"
		}, {
			"id": 101,
			"name": "添加页面",
			"type": "action"
		}, {
			"id": 102,
			"name": "添加",
			"type": "action"
		}, {
			"id": 103,
			"name": "详情",
			"type": "action"
		}, {
			"id": 104,
			"name": "编辑页面",
			"type": "action"
		}, {
			"id": 105,
			"name": "编辑",
			"type": "action"
		}, {
			"id": 106,
			"name": "删除",
			"type": "action"
		}, {
			"id": 107,
			"name": "权限获取",
			"type": "action"
		}, {
			"id": 108,
			"name": "权限分配",
			"type": "action"
		}]
	}]
}]

• 效果图
  

• 数据和事件的分析
  
  
  
  expandedKeys 展开的树节点
  autoExpandParent 是否展开父节点
  checkedKeys 选中的树节点
  selectedKeys选中的树节点

后端返回数据，转化为符合树形组件符合的数据

<template>
  <div class="power_wrap">
    <div class="power_header">
      <div class="power_header_l">
        <span><i class="iconfont icon-fanhui2 back_icon"></i></span>
        <h2>业务管理员权限</h2>
      </div>
      <div class="power_header_r">
        <a-button type="primary" class="power_btn">保存</a-button>
        <a-button class="power_btn">取消</a-button>
      </div>
    </div>
    <div class="power_content">
      <div class="power_content_l">
        <div class="power_content_title">配置系统</div>
        <div class="power_content_info">一体化机关办公门户</div>
      </div>
      <div class="power_content_r">
        <div class="power_content_title">拥有权限</div>
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @select="onSelect"
          @check="onCheck"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import treeDatas from './treeData.json';
  export default {
    name: '',
    data () {
      return {
        // 树形控件 相关
        // expandedKeys 展开的树节点 autoExpandParent 是否展开父节点 checkedKeys 选中的树节点 selectedKeys选中的树节点
        expandedKeys: [83, 91],
        autoExpandParent: true,
        checkedKeys: [99],
        selectedKeys: [],
        treeData: [],
      };
    },
    created () {
      this.getTree();
    },
    methods: {
      // 获取到树列表
      getTree () {
        this.treeData = this.changeData(treeDatas);
        console.log('这是res', this.treeData);
      },
      // 展开或收起节点触发
      onExpand (expandedKeys) {
        console.log('展开或收起节点触发', expandedKeys);
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      // 点击复选框触发
      onCheck (checkedKeys) {
        console.log('点击复选框触发', checkedKeys);
        this.checkedKeys = checkedKeys;
      },
      // 点击树节点触发
      onSelect (selectedKeys, info) {
        console.log('点击树节点触发', info);
        this.selectedKeys = selectedKeys;
      },
      // 把后端数据(json数据) 转化为符合 树形组件的结构方式
      changeData (data) {
        let that = this;
        let jsonObj = data;
        jsonObj.forEach(function (item) {
          item.name && (item.title = item.name);
          item.id && (item.key = item.id);
          delete item.name;
          delete item.id;
          if (item.client && Array.isArray(item.client)) {
            item.children = that.changeData(item.client);
            delete item.client;
          }
        });
        return jsonObj;
      },
    },
  };
</script>

<style  lang="less" scoped>
  .power_wrap{
    padding: 0 24px;
    width: 1168px;
    .power_header{
      display: flex;
      justify-content: space-between;
      height: 80px;
      background:#f9f9f9;
      .power_header_l{
        margin-top: 26px;
        display: flex;
        span{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: #fff;
        }
        .back_icon{
          font-size: 14px;
          width: 12px;
          color: #000;
        }
        h2{
          margin-left: 0.8%;
          width: 128px;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #2E3133;
          line-height: 28px;
        }
      }
      .power_header_r{
        width: 130px;
        margin-top: 24px;
        .power_btn{
          width: 60px;
          height: 32px;
        }
        .power_btn:nth-of-type(2){
          margin-left: 5%;
        }
      }
    }
    .power_content{
      display: flex;
      min-height: 605px;
      background: green;
      .power_content_l{
        width: 356px;
        .power_content_title{
          padding-left: 1.7%;
          height: 48px;
          line-height: 48px;
          background: yellow;
        }
        .power_content_info{
          padding: 5.5% 1.7% 0 1.7%;
          height: 557px;
          background: pink;
          text-align: center;
        }
      }
      .power_content_r{
        width: 800px;
      }
    }
  }
</style>

子组件接受父组件的数据

• 父组件使用自定义属性的方式，向子组件传递数据，

• 然后子组件使用props的方式去接受数据

• 最后要是需要吧数据定义在子组件中的data数据的话，则需要使用的是 tresData = this.XXX XXX为父组件传递来的数据

• 父组件向子组件传递数据 treeData

<div>
	<c-com :treeData="treeData"></c-com>
</div>

• 子组件接受父组件的数据
  • treeList 可以用于tree组件的数据渲染

export default {
  name: "",
  props:{
  	// 定义这个数据的默认值 和传递的格式
  	treeData:{
  		type:Array,
  		default() {
  			return [];
  		}
  	}
  },
  data() {
    return {
      treeList:this.treeData
    };
  }
};