查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

No.	推荐链接
1	Openlayers 【入门教程】 - 【源代码+图文 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

做项目时候碰到这样的一个需求: 左边列表中有4种类型，通过checkbox做选择，选择的数量的不同，决定了右侧的box的高度的不同。这里采用了ref的方法，定位到dom，进行高度的改变。

核心算法：

this.$ref.box.style.height= XXX+‘px’

示例效果图

示例源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-03-14
*/<template><div class="djs-box"><div class="topBox"><h3>vue中 ref 根据多选框所选数量，动态地变换box的高度</h3><div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div></div><div class="dajianshi"><div class="left"><el-checkbox-group v-model="checkedCities"><p v-for="city in cities" :key="city"><el-checkbox :label="city" @change="changeSize()">{{city}} </el-checkbox></p></el-checkbox-group></div><div class="box" ref="box"><p v-for="(item,index) in restaurants" :key="index">{{ item.name }}</p></div></div></div>
</template><script>const cityOptions = ['上海', '北京', '广州', '深圳'];export default {data() {return {checkedCities: ['上海', '北京'],cities: cityOptions,restaurants: [{"name": "三全鲜食（北新泾店）",},{"name": "Hot honey 首尔炸鸡（仙霞路）",},{"name": "唦哇嘀咖",},{"name": "爱茜茜里(西郊百联)",},{"name": "爱茜茜里(近铁广场)",},{"name": "鲜果榨,汁（金沙江路和美广店）",},{"name": "开心丽果（缤谷店）",},{"name": "超级鸡车（丰庄路店）",},{"name": "三全鲜食（北新泾店）",},{"name": "Hot honey 首尔炸鸡（仙霞路）",},{"name": "唦哇嘀咖",},{"name": "爱茜茜里(西郊百联)",},{"name": "爱茜茜里(近铁广场)",},{"name": "鲜果榨,汁（金沙江路和美广店）",},{"name": "开心丽果（缤谷店）",},{"name": "超级鸡车（丰庄路店）",},{"name": "三全鲜食（北新泾店）",},{"name": "Hot honey 首尔炸鸡（仙霞路）",},{"name": "唦哇嘀咖",},{"name": "爱茜茜里(西郊百联)",},{"name": "爱茜茜里(近铁广场)",},{"name": "鲜果榨,汁（金沙江路和美广店）",},{"name": "开心丽果（缤谷店）",},{"name": "超级鸡车（丰庄路店）",}],}},mounted() {this.changeSize()},methods: {changeSize() {let m = this.checkedCities.length;let k = 500 - m * 50;this.$refs.box.style.height = k + "px"},}}
</script>
<style scoped>.djs-box {width: 1000px;height: 650px;margin: 50px auto;border: 1px solid black;}.topBox {margin: 0 auto 0px;padding: 10px 0 20px;background: black;color: #fff;}.dajianshi {width: 98%;margin: 0 auto;height: 520px;background-color: cde;position: relative;}.left {width: 30%;height: 500px;float: left;margin:100px 10px 0;}.box {width: 60%;height: 500px;float: right;margin:10px;overflow-y: auto;/* 必须允许滚动 */border: 1px solid #369;}
</style>