本文参考：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){//根据报警级别显示颜色
// 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 表格内容格式化
<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 "当天有效";
break;
case "1":
return "当月有效";
break;
case "2":
return "季度有效";
break;
}
}
slot自定义列模板
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 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循环渲染表格内容
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'
}]
以上是数据，下面遍历数据
<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" >
<!-- 数据的遍历 scope.row就代表数据的每一个对象-->
<template slot-scope="scope">
<span>{{scope.row.list[index].value}}</span> <!--通过scope.row里面的数据来渲染表格内容-->
</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，就可以实现多级表头。
<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="市区"
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: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
网友评论