关于el-tree 可以进行全选 反选(父子不互相关联)

子组件:
"checkecd" @change='checkedAll'>全选
<el-tree 
 :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  :props='nodeProps'
  ref="orgTree"
  check-strictly(父子不互相关联)
  highlight-current
  :props="defaultProps">

后端返回的数据封装成树

/*{ org: '一级' , id: 1, parentId: 0 }, 
{ org: '二级' , id: 2, parentId: 0 }, 
{ org: '一级子节点A' , id: 3, parentId: 1 },
{ org: '一级子节点B' , id: 4, parentId: 1 },
{ org: '二级子节点A' , id: 5, parentId: 2 },*/
//后端返回的数据需要是上面的格式  parentId=1的可以放在id=1的下面以此类推
//DataList 是返回的数据  parendId 父id
data(){
	return{
	checked:false,
	allList:[],
	nodeProps:{chidren:'children,label:'org'}//返回的数据封装成树
	}
}
methods:{
	checkedAll(val){
	ifthis.checked){
		this.allList.forEach(item=>{
			this.orgAllList.push(item.id)
		})
			this.$ref.orgTree.setCheckedKeys(this.orgAllList)
		}else{
		this.$ref.orgTree.setCheckedKeys([])
		}
	}
	ToTree(DataList, parentId) {
	    let listarr= [];
	    let TreeList = DataList;
	    TreeList.forEach((item, index) => {
	        if (item.parentId == parentId) {
	            if (ToTree(TreeList , TreeList [index].id).length > 0) {
				    	treeArr[index].children=arrayToTree(TreeList,TreeList[index].id);
	            }
	            listarr.push(treeArr[index]);
	        }
	   });
	   return listarr;
	},
	//点击确定时候
	orgBtn(tree){
		let node=this.$refs.orgTree.getCheckedNode()
		if(node.length!=0){
			this.$emit('orgSelected',node)
		}
	},
	}
},
mounted:{
	if(this.childList.length=='你的数组长度'){
		this.checked=true
	}
},
props:['childList']

全选:使用getCheckedNode()获取所有勾选的节点,通过$emit发送给父组件。反选:在父组件内把子组件传递过来的值储存到一个容器内,然后在传递给子组件,用setCheckedKey属性。

你可能感兴趣的:(笔记)