【ant design vue】tree树形控件获取数据及数据回显与上传

树形控件官方文档

数据回显分析

首先是要处理treeData的数据格式，可以看到，官方要求的数据格式是这样：

 [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
];

title、key、children三个关键字缺一不可，但是很多时候后端并没有按照这个标准返回数据，所以这个时候前端需要自己处理一下数据。
首先是调整一下数据格式：

//调整格式
//调整格式的函数
const dealTreeData=(treeData)=>{
	const data=treeData.map(item=>({
		...item,
		title:item.name,
		key:item.id,
		children:(item.child&&item.child.length)?dealTreeData(item.child):null
	}))
	return data
}
//再进行一下调用
this.treeData=dealTreeData(res.data)

treeData处理好了，现在来实现数据回显的功能，也就是勾选已经存在的数据，由于父子节点是关联状态（这里是关联状态，如果想取消关联，将checkStrictly属性设置为true即可），如果上传父级节点，则子节点会全部勾选上，所以我们需要将子节点全部筛选出来。

1）判断是否有子节点，如果有子节点，添加“hasChild:true”属性，否则添加“hasChild:fasle”属性,这个关键字将作为之后判断是否为子节点的条件

//判断是否有子节点
calleArr(array){
	for(let i in array){ 
		var data=array[i];
		if(data.child.length>0){
			data['hasChild']=true
			this.calleArr(data.child)
		}else{
			data['hasChild']=false
		 }
	}
	
},

2）将数据扁平化，这样是为了方便筛选出我们所需要的数据

//数据扁平化
//arrs：树形数据名
//childs：树形数据子数据的属性名,常用'children'
//attrArr：需要提取的公共属性数组(默认是除了childs的全部属性)

extractTree(arrs,childs,attrArr){
  let attrList = [];
  if(!Array.isArray(arrs)&&!arrs.length)return [];
  if(typeof childs !== 'string')return [];
  if(!Array.isArray(attrArr)||Array.isArray(attrArr)&&!attrArr.length){
    attrList = Object.keys(arrs[0]);
    attrList.splice(attrList.indexOf(childs), 1);
  }else{
    attrList = attrArr;
  }
  let list = [];
  const getObj = (arr)=>{
    arr.forEach(function(row){
      let obj = {};
      attrList.forEach(item=>{
        obj[item] = row[item];
      });
      list.push(obj);
      if(row[childs]){
        getObj(row[childs]);
      }
    })
    return list;
  }
  return getObj(arrs);
},

3）假定 alreadyTreeData是我们返回的已有树形数据，

this.calleArr( alreadyTreeData)  //添加子节点判断条件
let arr=[]
this.extractTree(res.data.menus,'children').map(item=>{
	if(!item.hasChild){
		arr.push(item.id) // 将没有子节点数据的id添加到数组中
	}
})
this.checkedKeys=arr  //赋值给默认选中的属性

这样，数据回显功能基本就完成了。

数据上传分析

在做数据上传时，由于父子节点是关联状态的关系，checkedKeys属性只能获取到选中状态的子节点，而不能获取到半选中状态的父节点，所以我们需要在点击事件里手动获取一下

onCheck(checkedKeys,e) {
	  this.ishaschecked=true
	  this.checkedKeys = checkedKeys; //选中状态的子节点
	  this.halfCheckedKeys=e.halfCheckedKeys //半选中状态的父节点
	},

最后将两个数组用concat拼接一下就大功告成啦！