element-plus Layout布局实现一行五列 | 青训营

495 阅读1分钟

### Layout布局失效原因:

在element-plus官网可以看到布局可以划分成一、二、三、四、六等份 image.png image.png

也就是将宽度划分为24等份 :span="XXX"中“XXX”代表每个</ el-col>所占xxx/24比例 比如将页面划分成4份 image.png

但是如果将页面划分为5等份 :span="5"失效。 element-plus所携带的样式并不会令width=20% image.png

image.png 尝试多次失败和从网上寻求解决方法后,找到解决方法就是自己另写一个新的样式

### 一行五列实现代码:

因为1-24都被element-plus使用,所以要拿一个不是1-24的数 image.png

给该样式宽度 width="20%" image.png ### 一行五列实现效果: image.png

这个布局实现经过几天查找资料,刚开始遇到还以为自己代码写错,不断怀疑重写,确认写法没有错误后,对网页进行检查和结合网络上查找的解决方法,发现element-plus自带的样式不能实现一行5列的方法,要自己令写样式。虽然不是一个很难的代码,但能够解决这个被困扰很久的问题还是很开心。