<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200">
<template slot-scope="scope">
<div :class="scope.row.name === '王大虎' ? 'specialColor':''">{{scope.row.name}}</div>
</template>
</el-table-column>
编写specialColor样式,将字体颜色设置为红色
.specialColor{
color:red;
}
设置表头样式
需求:将表头样式改为背景色蓝色,字体颜色白色,字重400

header-cell-class-name
说明:表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。
类型:Function({row, column, rowIndex, columnIndex})/String
函数形式:将headerStyle方法传递给header-cell-class-name
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-class-name="headerStyle"
>
编写headerStyle,返回class名称tableStyle
headerStyle ({row, column, rowIndex, columnIndex}) {
return 'tableStyle'
}
在style中编写tableStyle样式
<style lang = "scss">
.tableStyle{
background-color: #1989fa!important;
color:#fff;
font-weight:400;
}
</style>
字符串形式:直接将tableStyle名称赋值给header-cell-class-name
<el-table
:data="tableData[lang]"
class="table"
stripe
border
header-cell-class-name="tableStyle"
>
header-cell-style
说明:表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
类型:Function({row, column, rowIndex, columnIndex})/Object
函数形式:将tableHeaderStyle方法传递给header-cell-style
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style='tableHeaderStyle'
>
编写tableHeaderStyle方法,返回样式
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
return 'background-color:#1989fa;color:#fff;font-weight:400;'
}
对象形式:直接在对象中编写样式
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style="{










