单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。
Function({row, column, rowIndex, columnIndex})/String
用法完整例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/elementUI/elementUI.css">
<style>
.red{color:red;}
</style>
</head>
<body class="">
<div id="demo">
<el-table :data="tableData" style="width: 100%" :cell-class-name="getCellClass">
<el-table-column prop="date" label="Date" width="180">
</el-table-column>
<el-table-column prop="name" label="Name" width="180">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</div>
<script src="../js/vue.js"></script>
<script src="../plugins/elementUI/elementUI.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data: {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
},
methods: {
getCellClass({ row, column, columnIndex }) {
if (columnIndex === 0 && row[column.property].indexOf('02') > -1) {
return 'red'
} else {
return ''
}
}
}
})
</script>
</body>
</html>