這篇文章主要介紹了如何解決elementUI中Table表格問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司專注于為企業(yè)提供網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、商城開發(fā)，微信小程序開發(fā)，軟件按需求定制設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

1.表格樣式問題：

混亂樣式.png

正常樣式.png

如上圖，在當(dāng)前導(dǎo)航表格table樣式是沒問題的，但當(dāng)我點(diǎn)擊別的導(dǎo)航去到另外的頁(yè)面，然后再回到之前的導(dǎo)航頁(yè)面，表格table的樣式就會(huì)混亂，隨便點(diǎn)擊當(dāng)前頁(yè)面或刷新亦或拉伸頁(yè)面，樣式又恢復(fù)正常,很奇怪的樣式問題。

打開調(diào)試之后，發(fā)現(xiàn)table的寬度并沒有按照100%來(lái)顯示，而是根據(jù)表格寬度值來(lái)計(jì)算的（我這里是640px），并且在table標(biāo)簽底下發(fā)現(xiàn)了colgroup和col標(biāo)簽，colgroup包裹著對(duì)應(yīng)單元格數(shù)的col,并且col的寬度為80px,瞬間恍然大悟，明白640px是怎么得來(lái)的，這里一共有8個(gè)單元格，8*80就是640px了，那要怎么解決這個(gè)默認(rèn)樣式呢？

一、給表格添加固定寬度

   //但是這個(gè)方法有個(gè)弊端，當(dāng)顯示的單元格過(guò)多時(shí)，表格下方會(huì)出現(xiàn)橫向滾動(dòng)條，數(shù)據(jù)不能一目了然，用戶體驗(yàn)感不佳，還是寬度自適應(yīng)比較好。

二、利用flex的特性

// 在項(xiàng)目中新建一個(gè)公共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里面的單元格不用設(shè)置寬度屬性，這里就可實(shí)現(xiàn)自適應(yīng)。

2.table表格數(shù)據(jù)問題

table顯示的數(shù)據(jù)并不是一成不變的，這里傳入table的data需要有實(shí)時(shí)監(jiān)控的功能，其中一個(gè)數(shù)據(jù)的改變就要及時(shí)顯示，這里我用計(jì)算屬性computed來(lái)進(jìn)行監(jiān)控。有時(shí)候后臺(tái)返回的狀態(tài)數(shù)據(jù)是0,1等等，我們也可以在里面進(jìn)行判斷渲染。

//vue文件

3.table表格的排序、篩選

//有時(shí)候需要對(duì)表格進(jìn)行排序或者篩選，查看或?qū)Ρ刃枰臄?shù)據(jù)，這里就要用到sortable屬性、filters屬性、filter-change方法、sort-change方法。
//vue文件

     
  //在列中設(shè)置sortable屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序