vue中ref 根据多选框所选数量，动态地变换box的高度

关于作者

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

文章目录

• • • 核心算法：
    • 示例效果图
    • 示例源代码

核心算法：

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>
 复制