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

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

'background-color': '#1989fa',
'color': '#fff',
'font-weight': '400'
}">

header-row-class-name

说明:表头行的className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。

类型:Function({row, rowIndex})/String

使用方式与header-cell-class-name类似

注意:header-row-class-name与header-cell-class-name的区别:

header-row-class-name是添加在tr上面的,header-cell-class-name是添加在th上面的。

header-row-class-name:

所以想让添加在tr上的样式显示,需要关闭element-ui中原本的th的样式,否则会被覆盖!(例如背景色)

header-cell-class-name:

header-row-style

说明:表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。

类型:Function({row, rowIndex})/Object

使用方式与header-cell-style类似

设置行样式

需求:将表格中行的背景色设置为浅蓝色

row-class-name

说明:行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。

类型:Function({row, rowIndex})/String

使用方式与header-cell-class-name类似

row-style

说明:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。

类型:Function({row, rowIndex})/Object

使用方式与header-cell-style类似

函数形式:将tableRowStyle方法传给row-style


<el-table
:data="tableData[lang]"
class="table"
border
:row-style="tableRowStyle"
>

编写tableRowStyle方法,返回样式


// 修改table tr行的背景色
tableRowStyle ({ row, rowIndex }) {
return 'background-color:#ecf5ff'
}

点击按钮操作当前行

需求:点击操作栏的按钮,切换按钮状态,并且将当前行置灰

通过slot-scope添加按钮


<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用该行</el-button>
<el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用该行</el-button>