快捷導(dǎo)航

elementUI中Table表格問題的解決方法

更新時(shí)間：2018年12月04日 10:11:38 作者：童話_xxv

這篇文章主要給大家介紹了關(guān)于elementUI中Table表格問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

element ui是一個(gè)非常不錯(cuò)的vue的UI框架，element對(duì)table進(jìn)行了封裝，簡化了vue對(duì)表格的渲染。

在開發(fā)vue框架項(xiàng)目時(shí)，引入element插件，使用table表格組件時(shí)，遇到了一些問題，以下列出以供參考。

1.表格樣式問題：

混亂樣式.png

正常樣式.png

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

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

一、給表格添加固定寬度

<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>
   //但是這個(gè)方法有個(gè)弊端，當(dāng)顯示的單元格過多時(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來進(jìn)行監(jiān)控。有時(shí)候后臺(tái)返回的狀態(tài)數(shù)據(jù)是0,1等等，我們也可以在里面進(jìn)行判斷渲染。

//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是請(qǐng)求接口得到的數(shù)據(jù)
   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表格的排序、篩選

//有時(shí)候需要對(duì)表格進(jìn)行排序或者篩選，查看或?qū)Ρ刃枰臄?shù)據(jù)，這里就要用到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'>
 //列中設(shè)置filters屬性即可開啟該列的篩選，filter-multiple是否多選
    <el-table-column
      prop="status" column-key="status" label="啟用狀態(tài)" 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>
  //在列中設(shè)置sortable屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序
     <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獲取需要的參數(shù)
   },
   //排序方法
   handleSortChange(sorts){
   //從sorts獲取需要的參數(shù)
    }
  }
}
   //其他table的屬性和方法可根據(jù)實(shí)際情況對(duì)應(yīng)地去使用，用法大多是大同小異的，可以去官網(wǎng)查看文檔喔
</script>

今天的心得就到這兒了，希望可以幫助到有需要的小伙伴兒O(∩_∩)O

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: