修改element表格组件的样式

最近在开发一个项目,使用到了element中的表格组件,但是该组件的样式不是我们想要的样式,需要自己再调整,但是常常会遇到自己设置的样式无效,我使用的技术是Vue开发的

1. 页面使用了三栏布局,最右边的表格需要自适应,左边两栏都是固定宽度,因此我使用了flex布局,el-table外层使用了一个div,样式都加载这个div中,这时遇到一个问题,那就表格无法自适应,因为表格我加了stripe,border属性,这些都是element自带的样式,会和flex布局有关系,这是我又加了fit列的宽度是否自撑开设个为false,这时没有问题,但是我目标效果就是自动撑开,显然不能这么处理,然后我尝试着把外层div去掉,把样式加在el-table,这个时候就可以达到我想要的效果。分析原因,element的表格是自动撑开时样式要加在表格身上。

2. 表格加了斑马线的属性,但是有些行我不要加斑马线,默认情况下斑马线样式优先显示,样式中可以使用!important,但是鼠标滑动效果又没有了,这个问题一直困恼着我好久,还没有好的解决办法

3. 表格居中问题,默认表格是中间对齐,如果内容要左对齐,就要自己把内容设置个宽度,要不然内容长度不同是无法对齐的。

猜你喜欢

转载自www.cnblogs.com/wuxianqiang/p/9191023.html