Vue3使用Element-Plus + TypeScript的Container组件宽度不自动撑满_element plus组件不能占满全页面

复现

可以看到我们右侧还有很大的空间没有自动撑满，宽度是随子组件的宽度。

解决方案

在main.ts里面模板自动给我们添加了一条样式的引入

import { createApp } from 'vue'
import './style.css'
// Element-Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// Pinia
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router/index'
1
2
3
4
5
6
7
8
9
10

可以看到，第二行默认引入了一个样式，而我们其实是不需要那个样式的，所以我们注释掉就可以啦。

import { createApp } from 'vue'
// import './style.css'
// Element-Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// Pinia
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router/index'
1
2
3
4
5
6
7
8
9
10

问题解决

可以看到，已经撑满全屏了，问题解决。