左边的布局是一个二维数组渲染出来的,右边的高度要和左边数据渲染之后的高度一致。大概是下面这样的布局:
在这里插入图片描述

<div>
	<div class="left" ref="leftList" style="float:left">
		<div v-for="item in list">
			<p v-for="child in item.children">{{child}}</p>
		</div>
	</div>
	<div class="right" ref="right" style="float:left"></div>
</div>
<script>
export default{
	data(){
		return{
			list:[]
		}
	},
	create(){
		$ajax().then(res=>{
			this.list=res.data;
			this.$nextTick(()=>{
				this.$refs.right.$el.style.height=this.$refs.leftList.clientHeight+'px';
			})	
		})
	},
	watch:{
		list:function(){
			this.$nextTick(()=>{
				this.$refs.right.$el.style.height=this.$refs.leftList.clientHeight+'px';
			})
		}
	},
	methods:{
		delProcess(index, childIndex) {
      		let list = JSON.parse(JSON.stringify(this.list[index]));
      		list.children= this.list[index].children.filter(
        		(item, itemIndex) => {
          			return itemIndex !== childIndex;
        		}
      		);
      		this.list.splice(index, 1, list);
	      // 这里是为了Vue可以检测到数组更新(二维数组)
	      // 也是为了watch可以监测到数组变化
    	}
	}
}
</script>
Logo

前往低代码交流专区

更多推荐