vue里面左右布局,右边的高度随左边的高度而改变
左边的布局是一个二维数组渲染出来的,右边的高度要和左边数据渲染之后的高度一致。大概是下面这样的布局:<div><div class="left" ref="leftList" style="float:left"><div v-for="item in list"><p v-for="child in item.children"&g...
·
左边的布局是一个二维数组渲染出来的,右边的高度要和左边数据渲染之后的高度一致。大概是下面这样的布局:
<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>
更多推荐
已为社区贡献4条内容
所有评论(0)