iview的树形控件渲染

<template>
 <div>
   <Tree :data="newlist" show-checkbox @on-check-change="choiceAll" ref="tree4">
   </Tree>
   <!-- <div>{{newlist}}</div> -->
 </div>
</template>

<script>
export default {
  data () {
    return {
		content:[	
			 {"id":1,"pid":0,"title":"默认维度","type":"0"},
			{"id":2,"pid":1,"title":"上海科技有限公司","type":"1"},
			{"id":3,"pid":2,"title":"北京科技有限公司","type":"1"},
			{"id":4,"pid":2,"title":"北京科技有限公司","type":"1"},
			{"id":117,"pid":4,"title":"测试部门","type":"2"},
			{"id":5,"pid":2,"title":"徐州科技有限公司","type":"1"},
			{"id":6,"pid":2,"title":"重庆科技有限公司","type":"1"},
			{"id":114,"pid":12,"title":"需求分析师","type":"3"},
			{"id":7,"pid":2,"title":"人力资源部","type":"2"},
			{"id":100,"pid":7,"title":"修改岗位测试3","type":"3"},
			{"id":101,"pid":7,"title":"添加岗位测试","type":"3"},
			{"id":102,"pid":7,"title":"添加岗位测试2","type":"3"},
			{"id":103,"pid":8,"title":"java开发","type":"3"},
			{"id":107,"pid":7,"title":"HR","type":"3"},
			{"id":8,"pid":2,"title":"产品研发部","type":"2"},
			{"id":10,"pid":8,"title":"统一岗位","type":"3"},
			{"id":9,"pid":2,"title":"销售部","type":"2"},
			{"id":108,"pid":9,"title":"销售顾问","type":"3"},
			{"id":11,"pid":2,"title":"深圳科技有限公司","type":"1"},
			{"id":12,"pid":2,"title":"咨询服务部","type":"2"},
			{"id":106,"pid":12,"title":"咨询顾问","type":"3"},
		],
		newlist:[]
    }
  },
  methods: {
	deepSort(list, content) {
	  var content1 = []
	  for (var m = 0; m < list.length; m++) {
		for (var n = 0; n < content.length; n++) {
		  if (list[m].id === content[n].pid) {
			list[m].children.push(content[n])
		  } else {
			content1.push(content[n])
		  }
		}
	  }
	  for (var o = 0; o < list.length; o++) {
		this.deepSort(list[o].children, content1)
	  }
	},
	choiceAll (data){
    console.log(data);  //当复选框选中时则会打印出选中的内容
//     let choicesAll=this.$refs.tree4.getCheckedNodes; //方法的运用 getSelectedNodes也是如此用法
//     console.log(choicesAll); 
  },
  },
  mounted () {
	for (var a = 0; a < this.content.length; a++) {		//给每条数据加上children属性
	  this.content[a].children = []
	}
	for (var b = 0; b < this.content.length; b++) {		//拿出最高层级的元素----pid数值最小则层级最高,此处直接取0,省去很多麻烦的数据操作
	   if (this.content[b].pid === 0) {
		  this.newlist = this.content.splice(b, 1)
	   }
	}
	this.deepSort(this.newlist, this.content)
  }
}
</script>

<style>

</style>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值