修改element表格组件的样式
最近在开发一个项目,使用到了element中的表格组件,但是该组件的样式不是我们想要的样式,需要自己再调整,但是常常会遇到自己设置的样式无效,我使用的技术是Vue开发的
1. 页面使用了三栏布局,最右边的表格需要自适应,左边两栏都是固定宽度,因此我使用了 flex 布局, el-table 外层使用了一个 div ,样式都加载这个 div 中,这时遇到一个问题,那就表格无法自适应,因为表格我加了 stripe,border 属性,这些都是element自带的样式,会和 flex 布局有关系,这是我又加了 fit 列的宽度是否自撑开设个为 false ,这时没有问题,但是我目标效果就是自动撑开,显然不能这么处理,然后我尝试着把外层 div 去掉,把样式加在 el-table ,这个时候就可以达到我想要的效果。分析原因,element的表格是自动撑开时样式要加在表格身上。
2. 表格加了斑马线的属性,但是有些行我不要加斑马线,默认情况下斑马线样式优先显示,样式中可以使用 !important ,但是鼠标滑动效果又没有了,这个问题一直困恼着我好久,还没有好的解决办法
3. 表格居中问题,默认表格是中间对齐,如果内容要左对齐,就要自己把内容设置个宽度,要不然内容长度不同是无法对齐的。