Element-UI中关于table表格的那些骚操作(小结)

2020-06-14 06:26:28易采站长站整理

<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="{