Element Plus el-row和el-col布局：解决md屏幕下图表过宽导致布局错乱的问题
在使用Element Plus的el-row和el-col组件进行响应式布局时，很多开发者会遇到在中型屏幕（md断点，通常对应992px~1200px宽度区间）下图表容器过宽，挤压其他内容、导致整体布局错乱的问题。本文将结合实际场景分析原因，并提供可落地的解决方案。
问题复现与原因分析
我们先看一个常见的布局场景：页面分为左右两栏，左侧是信息面板，右侧是图表区域，使用el-row和el-col实现响应式适配。部分开发者可能会写出如下代码：
<template>
<el-row :gutter="20">
<!-- 左侧信息面板 -->
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<div class="info-panel">
<h3>基础信息</h3>
<p>用户总数：1000</p>
<p>活跃用户：800</p>
</div>
</el-col>
<!-- 右侧图表区域 -->
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
<div class="chart-container" id="main-chart"></div>
</el-col>
<el-row>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
const chartDom = document.getElementById('main-chart')
const myChart = echarts.init(chartDom)
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
}
myChart.setOption(option)
})
</script>
<style scoped>
.info-panel {
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
}
.chart-container {
width: 100%;
height: 400px;
}
</style>上述代码在lg、xl等大屏下布局正常，但在md屏幕下往往会出现图表过宽的问题，核心原因有两点：
el-col的栅格计算逻辑：Element Plus的栅格系统默认将一行分为24格，当设置:md="16"时，意味着在md及以上屏幕下该列占据16/24的宽度，但如果父容器本身存在非预期的padding、margin，或者图表容器没有正确继承父级宽度，就会出现宽度溢出。图表渲染的独立性：ECharts等图表库在初始化时如果未监听容器尺寸变化，或者容器宽度被设置为固定值，就会忽略栅格布局的响应式约束，导致宽度超出预期。
解决方案一：修正el-col栅格配置与容器样式
首先排查栅格配置的合理性，同时给图表容器添加正确的盒模型属性，避免padding、border影响实际宽度：
<template>
<el-row :gutter="20">
<!-- 左侧信息面板 -->
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<div class="info-panel">
<h3>基础信息</h3>
<p>用户总数：1000</p>
<p>活跃用户：800</p>
</div>
</el-col>
<!-- 右侧图表区域 调整md断点的栅格占比，增加小屏适配 -->
<el-col :xs="24" :sm="24" :md="10" :lg="18" :xl="18">
<div class="chart-container" id="main-chart"></div>
</el-col>
<el-row>
</template>
<style scoped>
.info-panel {
padding: 20px;
background: #f5f7fa;
border-radius: 4px;
/* 修正盒模型，避免padding撑大容器 */
box-sizing: border-box;
}
.chart-container {
width: 100%;
height: 400px;
/* 显式设置盒模型，防止内部padding影响宽度 */
box-sizing: border-box;
/* 可选：添加最大宽度约束，避免过宽 */
max-width: 100%;
}
</style>这里将md断点下的右侧列栅格占比从16调整为10，同时为容器添加box-sizing: border-box，确保容器的padding、border不会额外增加总宽度，从栅格层面避免列宽超出预期。
解决方案二：监听窗口变化，动态重绘图表
如果栅格配置正确但图表仍然过宽，通常是图表没有响应变化。我们可以通过监听窗口 resize 事件，或者监听容器尺寸变化，动态调用图表的resize方法：
<template>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="10" :lg="18" :xl="18">
<div class="chart-container" ref="chartRef"></;
</el-col>
<el-row>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = () => {
if (!chartRef.value) return
myChart = echarts.init(chartRef.value)
const option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
}
myChart.setOption(option)
}
// 窗口 resize 时重绘图表
const handleResize = () => {
myChart && myChart.resize()
}
onMounted(() => {
initChart()
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
// 销毁图表实例，避免内存泄漏
myChart && myChart.dispose()
})
</script>这种方式可以让图表始终跟随容器宽度变化，即使栅格布局在不同断点下调整了列宽，图表也能同步适配，避免过宽问题。
解决方案三：使用ResizeObserver监听容器尺寸变化
如果页面存在侧边栏折叠、其他元素动态显隐等场景，窗口resize事件可能无法精准捕获容器尺寸变化，此时可以使用ResizeObserver直接监听图表容器的尺寸变化：
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref(null)
let myChart = null
let resizeObserver = null
onMounted(() => {
if (!chartRef.value) return
myChart = echarts.init(chartRef.value)
const option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }]
}
myChart.setOption(option)
// 监听容器尺寸变化
resizeObserver = new ResizeObserver(() => {
myChart && myChart.resize()
})
resizeObserver.observe(chartRef.value)
})
onUnmounted(() => {
resizeObserver && resizeObserver.disconnect()
myChart && myChart.dispose()
})
</script>ResizeObserver可以更精准地响应容器本身的大小变化，包括栅格布局调整、父元素尺寸变化等场景，适配性比窗口resize事件更强。
总结
解决md屏幕下图表过宽导致布局错乱的问题，需要从三个层面入手：
首先是栅格配置层面，合理设置不同断点下
el-col的栅格占比，避免列宽超出预期。其次是样式层面，为容器设置正确的
box-sizing属性，避免padding影响宽度计算。最后是图表适配层面，通过监听窗口变化或容器尺寸变化，动态调用图表的resize方法，确保图表始终适配容器宽度。
按照上述步骤调整后，即可在不同屏幕尺寸下保持布局稳定，图表显示正常。