在开发vue框架项目时,引入element插件,使用table表格组件时,遇到了一些问题,以下列出以供参考。
1.表格样式问题:
混乱样式.png
正常样式.png
如上图,在当前导航表格table样式是没问题的,但当我点击别的导航去到另外的页面,然后再回到之前的导航页面,表格table的样式就会混乱,随便点击当前页面或刷新亦或拉伸页面,样式又恢复正常,很奇怪的样式问题。
打开调试之后,发现table的宽度并没有按照100%来显示,而是根据表格宽度值来计算的(我这里是640px),并且在table标签底下发现了colgroup和col标签,colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟,明白640px是怎么得来的,这里一共有8个单元格,8*80就是640px了,那要怎么解决这个默认样式呢?
一、给表格添加固定宽度
//但是这个方法有个弊端,当显示的单元格过多时,表格下方会出现横向滚动条,数据不能一目了然,用户体验感不佳,还是宽度自适应比较好。
二、利用flex的特性
// 在项目中新建一个公共css文件,这样可以适用于所有表格table
//common.css
table,tbody,thead {
width: 100% !important;
}
col