如何解决elementUI中Table表格问题-创新互联

这篇文章主要介绍了如何解决elementUI中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;
}
colgroup {
  position: absolute;
  width: 100% !important;
  display: flex;
}
col {
  flex: 1;
  text-align: center;
}
//在main.js中引入即可，table里面的单元格不用设置宽度属性，这里就可实现自适应。

2.table表格数据问题

table显示的数据并不是一成不变的，这里传入table的data需要有实时监控的功能，其中一个数据的改变就要及时显示，这里我用计算属性computed来进行监控。有时候后台返回的状态数据是0,1等等，我们也可以在里面进行判断渲染。

//vue文件

3.table表格的排序、筛选

//有时候需要对表格进行排序或者筛选，查看或对比需要的数据，这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。
//vue文件

     
  //在列中设置sortable属性即可实现以该列为基准的排序