elementUI中Table表格問(wè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="柜子類型說(shuō)明" width="250" align="center"highlight-current-row="true">
 </el-table-column>
</div>
</template>
 //但是這個(gè)方法有個(gè)弊端，當(dāng)顯示的單元格過(guò)多時(shí)，表格下方會(huì)出現(xiàn)橫向滾動(dòng)條，數(shù)據(jù)不能一目了然，用戶體驗(yàn)感不佳，還是寬度自適應(yīng)比較好。

// 在項(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)。

//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="柜子類型說(shuō)明" 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>

//有時(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屬性即可開(kāi)啟該列的篩選，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:{
 //過(guò)濾方法
 handleFilterChange(filters) {
 //從filters獲取需要的參數(shù)
 },
 //排序方法
 handleSortChange(sorts){
 //從sorts獲取需要的參數(shù)
 }
 }
}
 //其他table的屬性和方法可根據(jù)實(shí)際情況對(duì)應(yīng)地去使用，用法大多是大同小異的，可以去官網(wǎng)查看文檔喔
</script>