您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
成就一亿技术人!
hope_wisdom 发出的红包
实付元使用余额支付
点击重新获取
钱包余额
0
抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。余额充值
}

先看效果图：根据某项属性确定高亮哪一列或几列的单元格。根据elemenUI中 table组件的可修改属性来配置 cell-style
<el-table
ref="multipleTable"
:data="tableData"
v-loading="loading"
:cell-style="abnormal_columnStyle"
:header-cell-style="{'padding':'0 5px', 'text-align': 'center' }"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column prop="abnormal_type" label="异常类型" min-width="120">
<template slot-scope="scope">
<span :style="abnormal_typeText(scope.row.abnormal_type).style">● </span>
{{ abnormal_typeText(scope.row.abnormal_type).text }}
</template>
</el-table-column>
<el-table-column prop="check_count" label="次数" min-width="60">
</el-table-column>
<el-table-column prop="region" label="省份" width="">
</el-table-column>
<el-table-column prop="city" label="城市" width="">
</el-table-column>
<el-table-column prop="nickname" label="用户" width="">
</el-table-column>
</el-table>
把回调的函数写在computed，利用缓存
abnormal_columnStyle() {
return function(row, column, rowIndex, columnIndex) {
const style = {
times: {
'backgroundColor':'#ff5b5b','text-align':'center','font-weight':'bold','color':'#fff'},
person: {'backgroundColor':'#db639b','text-align':'center','font-weight':'bold','color':'#fff'},
area: {'backgroundColor':'#ea9b17','text-align':'center','font-weight':'bold','color':'#fff'},
all: {'text-align':'center',},
}
if (row.column.property == 'nickname') {
if (row.row.abnormal_type == 'person') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
} else if (row.column.property == 'region'
row.column.property == 'city') {
if (row.row.abnormal_type == 'area') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
}else if (row.column.property == 'check_count') {
if (row.row.abnormal_type == 'times') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
}else{
return style['all']
}
}
},
}

layui学习笔记（一）之改变table表格样式：表头样式和隔行换色样式作为一名Java实习生，最近需要接触到前端框架，所以开始学习国产的开源框架layui。它比easyui更加美观。用layui搭建了一个报表系统的展示页面。layui表格的原生样式不是很符合需求，因此参考别人的方法加上自己实践，成功更改了layui-table的样式。步骤：（1）找到layui的css文件：layui/css/layui.css;（2）更改layui-table的默认背景颜色：.layui-flow-more a cite:hover{opacity:.8}.layui-flow-more a i{font-size:30px;color:#737383}.layui-table{width:100%;background-color:#d9dde4;color:#0a0a0a}，更改其中background-color值即可；（3）更改隔行换色样式:同样的在layui.css中找到：.layui-table[lay-even] tr:nth-child(even){background-color:#c3cedd},更改其中的background-color值即可。（4）更改表头样式，表头样式在layui.css中找不到，自己加了一句但是不起效果，我是在table渲染后，在done中通过jq设置样式的方法更改的：`layui.use(‘table’, function() {var table = layui.table;table.render({elem : ‘#memberList’,url : ‘/baoming/list’ //数据接口,size: ‘sm’,even:true,method:‘POST’,id:‘testReload’,data:tableContent,page : true //开启分页,cols : [ [ //表头{field : ‘classType’,title : headerArray[1],width: ‘20%’,//style: ‘background-color: #5FB878; color: #fff’,sort : true,fixed : ‘left’,align : ‘center’},{field : ‘item’,title : headerArray[2],sort : true,width: ‘40%’,//style: ‘background-color: #5FB878; color: #fff’,fixed : ‘left’,align : ‘center’}, {field : ‘money’,title : headerArray[3],sort : true,width: ‘40%’,//style: ‘background-color: #5FB878; color: #fff’,align : ‘center’}
] ],
**done : function(res, curr, count){
tableList=res.data;
$('th').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'})
}**
});
`$('th')代表表头，通过设置它的样式，就成功表头样式了。
}