elementUI的Table 表格問題

Vue · 發表 2018-12-04 10:05:45

摘要：在開發vue框架專案時，引入element外掛，使用table表格元件時，遇到了一些問題，以下列出以供參考。 1.表格樣式問題：混亂樣式.png 正常樣式.png 如上圖，在當前導航表格tabl...

在開發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.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檔案
<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">
<spanv-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

playUp.jpg

elementUI的Table 表格問題

您可能也會喜歡…