本篇文章屬於升級版,歡迎交流指教~~
導航:
- 表格頭部與內容對不齊
- 表格內容過長
- 處理初始化閃過暫無數據
- 動態表頭1
- 動態表頭+內容2
- 動態表頭及層級表頭
1、第一個就是表格頭部與內容對不齊的問題了,一直以來都感覺他不算啥大問題,但是完美主義者還是想改。
在App.vue文件中加入:
body .el-table th.gutter{
display: table-cell!important;
}
完美解決。
2、不知道有沒有爲了表格內容過長佔地兒苦惱,有個超簡代碼來解決:
<el-table border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="areaName" label="所在行政區">
</el-table-column>
<el-table-column prop="num" label="企業編號" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="name" label="企業名稱" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="address" label="企業地址" width="90" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="linkMan" label="聯繫人" width="70">
</el-table-column>
<el-table-column prop="phone" label="移動電話" width="120">
</el-table-column>
<el-table-column label="標籤" show-overflow-tooltip>
<template slot-scope="scope">
<span v-for="item in scope.row.tagList">
{{item.name}},
</span>
</template>
</el-table-column>
<el-table-column prop="telephone" label="固定電話" width="90">
</el-table-column>
<el-table-column label="狀態" width="60">
<template slot-scope="scope">
<div v-if="scope.row.status==0">啓用</div>
<div v-if="scope.row.status==1">停用</div>
</template>
</el-table-column>
<el-table-column label="操作" width="270">
<template slot-scope="scope">
<el-button v-if="scope.row.status==1" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
size="small">啓用</el-button>
<el-button v-if="scope.row.status==0" icon="el-icon-s-check" @click="handleStop(scope.row)" type="text"
size="small" class="btncolor">停用</el-button>
<el-button icon="el-icon-edit" @click="changeSourceOfPPage(scope.row)" type="text">編輯</el-button>
<el-button v-if="scope.row.outletList.length == 0" icon="el-icon-delete" @click="handleDelete(scope.row)" type="text" style="color:red">刪除
</el-button>
<el-button v-if="scope.row.outletList.length!= 0" icon="el-icon-delete" @click="handleDelete2(scope.row)" type="text" style="color:red">刪除
</el-button>
<el-button icon="el-icon-info" @click="addTag(scope.row)" type="text" style="color:#FFB427">設置標籤</el-button>
</template>
</el-table-column>
</el-table>
找到它了嗎? 每錯就是 show-overflow-tooltip !
效果圖來一張:
3、有沒有發現上面的表格代碼多了個東西
<template slot="empty">
<p>{{dataText}}</p>
</template>
element表格加載開始時總會彈出 '暫無數據' ,爲了避免這個問題,有個解決辦法
- 表格中加入以上代碼
-
data() {
return {
dataText: "",//表格開始置空}}
4、動態表頭1
<el-table border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="monitorDate" label="時間" width="190">
</el-table-column>
<el-table-column prop="outletName" label="排口名稱">
</el-table-column>
<el-table-column prop="outletTag" label="排口標籤" width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column v-for="(i,index) in headerData1" :key="index">
<template slot="header" slot-scope="scope">
{{i}}({{headerData2[index]}})
</template>
<template slot-scope="scope">
<span v-if="scope.row.value[index]!=''">{{scope.row.value[index]}}({{scope.row.flag[index]}})</span>
</template>
</el-table-column>
</el-table>
5、動態表頭+內容2:
第一個接口獲取表頭
第二個接口通過表頭名字得到值
一切都是element自動處理,厲害了!
效果圖:
6、動態表頭及層級表頭
效果圖:
代碼:
<el-table v-if="showTable" border :data="historyData">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<el-table-column prop="monitorDate" label="時間" width="190">
</el-table-column>
<el-table-column prop="outletName" label="排口名稱">
</el-table-column>
<el-table-column prop="outletTag" label="排口標籤" width="100" show-overflow-tooltip>
</el-table-column>
<el-table-column v-for="(i,index) in headerData_monitor" :key="index" align="center"
:label="i+'('+headerData_unit[index]+')'">
<el-table-column v-for="(j,index2) in top" :label="j" :key="index2">
<template slot-scope="scope">
<span v-if="j=='最大值'">{{scope.row.max[index]}}<span
v-if="scope.row.max[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='最小值'">{{scope.row.min[index]}}<span
v-if="scope.row.min[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='平均值'">{{scope.row.value[index]}}<span
v-if="scope.row.value[index]!=''">({{scope.row.flag[index]}})</span></span>
<span v-if="j=='累計值'">{{scope.row.cou[index]}}<span
v-if="scope.row.cou[index]!=''">({{scope.row.flag[index]}})</span></span>
</template>
</el-table-column>
</el-table-column>
</el-table>
data() {
return {
dataText: "", //表格開始置空
top: ['最大值', '最小值', '平均值', '累計值', ],
historyData: [], //回顯到表格的數據
headerData_monitor: [], //參數名
headerData_unit: [], //參數單位
};
},
有用就點個贊再走吧!