本文參考：https://blog.csdn.net/qq_32610671/article/details/90731672
cell-style自定義單元格字體樣式
image.png
<el-table :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange" :cell-style="cellStyle" border>
<el-table-column type="selection" width="55" :selectable="isDisabled"></el-table-column>
<el-table-column label="確認" align="center" width="80">
<template slot-scope="scope">
<el-button type="success" size="mini" :disabled="scope.row.confirm"
@click="confirmHandle(scope.row.pointId)">
{{scope.row.confirm?'已確認':'確認'}}
</el-button>
</template>
</el-table-column>
<el-table />
methods: {
cellStyle(row,column,rowIndex,columnIndex){//根據(jù)報警級別顯示顏色
// console.log(row);
// console.log(row.column);
if(row.column.label==="告警級別"&& row.row.alarmLevel==="緊急告警"){
return 'color:red'
}else if(row.column.label==="告警級別"&& row.row.alarmLevel==="一般告警" ){
return 'color:yellow'
}
}
}
render-header自定義表頭
<el-table-column prop="date" label="日期" sortable width="180" :render-header="renderHeaderDate">
renderHeaderDate(){
return (<div style="position:relative;top:16px;left:2px;">
<i class="el-icon-time"></i>
<span>日期</span>
</div>)
},
效果
image.png
formatter 表格內(nèi)容格式化
<el-table size="small" :data="TableData.lists" :header-cell-style="headerStyle" border style="width: 100%">
<el-table-column :align="TableData.align" prop="offer_id" label="套餐ID" min-width="200"></el-table-column>
<el-table-column :align="TableData.align" prop="offer_name" label="套餐名稱" min-width="250"></el-table-column>
<el-table-column :align="TableData.align" prop="price" label="套餐價格" min-width="140"></el-table-column>
<!--綁定formatter-->
<el-table-column :align="TableData.align" prop="effect_type" label="類型" :formatter="typeFormatter"
min-width="180">
</el-table-column>
</el-table>
typeFormatter: function(row, column) {
switch (row.effect_type) {
case "0":
return "當(dāng)天有效";
break;
case "1":
return "當(dāng)月有效";
break;
case "2":
return "季度有效";
break;
}
}
slot自定義列模板
通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)胖烛，用法參考 demo。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</template>
效果
image.png
v-for循環(huán)渲染表格內(nèi)容
colunmName: ['澳中線-悉尼-倉庫', '澳中線-悉尼-倉庫1'],
totalNumber: 100,
data: [{
list: [
{
name: '澳中線-悉尼-倉庫1',
value: 1
},
{
name: '澳中線-悉尼-倉庫1',
value: 1
}
],
userName: 'admin'
}, {
list: [
{
name: '澳中線-悉尼-倉庫1',
value: 1
},
{
name: '澳中線-悉尼-倉庫1',
value: 1
}
],
userName: 'jason'
}]
以上是數(shù)據(jù)拆檬，下面遍歷數(shù)據(jù)
<el-table
:data="data"
border
>
<el-table-column
prop="userName"
:label="$t('user.username')"
>
</el-table-column>
<!-- 自定義列的遍歷-->
<el-table-column v-for="(item, index) in colunmName" :key="index" :label="item" >
<!-- 數(shù)據(jù)的遍歷 scope.row就代表數(shù)據(jù)的每一個對象-->
<template slot-scope="scope">
<span>{{scope.row.list[index].value}}</span> <!--通過scope.row里面的數(shù)據(jù)來渲染表格內(nèi)容-->
</template>
</el-table-column>
</el-table-column>
<el-table-column
prop="Total"
:label="$t('ad.totalNumber')"
>
</el-table-column>
</el-table>
多級表頭
image.png
只需要在 el-table-column 里面嵌套 el-table-column，就可以實現(xiàn)多級表頭妥凳。
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column label="配送信息">
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column label="地址">
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市區(qū)"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="郵編"
width="120">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
tableData: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
