前言
element ui是一個非常不錯的vue的UI框架，element對table進行了封裝，簡化了vue對表格的渲染。
在開發vue框架項目時，引入element插件，使用table表格組件時，遇到了一些問題，以下列出以供參考。
1.表格樣式問題：
混亂樣式.png
正常樣式.png
如上圖，在當前導航表格table樣式是沒問題的，但當我點擊別的導航去到另外的頁面，然后再回到之前的導航頁面，表格table的樣式就會混亂，隨便點擊當前頁面或刷新亦或拉伸頁面，樣式又恢復正常,很奇怪的樣式問題。
打開調試之后，發現table的寬度并沒有按照100%來顯示，而是根據表格寬度值來計算的（我這里是640px），并且在table標簽底下發現了colgroup和col標簽，colgroup包裹著對應單元格數的col,并且col的寬度為80px,瞬間恍然大悟，明白640px是怎么得來的，這里一共有8個單元格，8*80就是640px了，那要怎么解決這個默認樣式呢？
一、給表格添加固定寬度
<template><div class="table"> <el-table :data="data" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable"> <el-table-column prop="deviceTypeName" label="柜子類型名稱" width="250" align="center" highlight-current-row="true"> </el-table-column> <el-table-column prop="deviceTypeIntroduce" label="柜子類型說明" width="250" align="center"highlight-current-row="true"> </el-table-column></div></template> //但是這個方法有個弊端，當顯示的單元格過多時，表格下方會出現橫向滾動條，數據不能一目了然，用戶體驗感不佳，還是寬度自適應比較好。二、利用flex的特性
// 在項目中新建一個公共css文件，這樣可以適用于所有表格table//common.csstable,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文件<template><div class="table"> //這里的dataList就是computed里面的dataList <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" > <el-table-column prop="deviceTypeName" label="柜子類型名稱" align="center" highlight-current-row="true"> </el-table-column> <el-table-column prop="deviceTypeIntroduce" label="柜子類型說明" align="center"highlight-current-row="true"> </el-table-column></div></template><script>export default { name: "basetable", data(){ return{ tableData:[], } }， computed: { dataList() { //這里的 this.tableData是請求接口得到的數據 let liArr = this.tableData; if(liArr .length>0){ for (var i = 0; i < liArr.length; i++) { if (liArr[i].status == 0) { liArr[i].status = "啟用"; } else if (liArr[i].status == 1) { liArr[i].status = "停用"; } if (liArr[i].line == 0) { liArr[i].line = "離線"; } else if (liArr[i].line == 1) { liArr[i].line = "在線"; } } return liArr; } } },}</script>3.table表格的排序、篩選
//有時候需要對表格進行排序或者篩選，查看或對比需要的數據，這里就要用到sortable屬性、filters屬性、filter-change方法、sort-change方法。//vue文件<template><div class="table"> // 將filter-change方法、sort-change方法放在el-table里面 <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" @filter-change="handleFilterChange" @sort-change='handleSortChange'> //列中設置filters屬性即可開啟該列的篩選，filter-multiple是否多選 <el-table-column prop="status" column-key="status" label="啟用狀態" align="center" :filters="[{ text: '啟用', value: '啟用' }, { text: '停用', value: '停用' }]" filter-placement="bottom" :filter-multiple="ismultiple" > <template slot-scope="scope"> <span v-if="scope.row.status=='啟用' " style="color:green">{{ scope.row.status }}</span> <span v-else style="color: red" >{{ scope.row.status }}</span> </template> </el-table-column> //在列中設置sortable屬性即可實現以該列為基準的排序 <el-table-column prop="deviceTypeIntroduce" label="漲幅" sortable align="center" highlight-current-row="true"> </el-table-column></el-table></div></template><script>export default { name: "basetable", data(){ return{ tableData:[], ismultiple：false } }， methods:{ //過濾方法 handleFilterChange(filters) { //從filters獲取需要的參數 }, //排序方法 handleSortChange(sorts){ //從sorts獲取需要的參數 } }} //其他table的屬性和方法可根據實際情況對應地去使用，用法大多是大同小異的，可以去官網查看文檔喔</script>今天的心得就到這兒了，希望可以幫助到有需要的小伙伴兒O(∩_∩)O
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
