bootstrap-table-vue插件修改每行的背景颜色
html代码片段
//页面里面引用bootstrap-table的一段代码
//option是来写一些你对表格的设置,比如pageSize: "5",pagination: true,
//data就是绑定的渲染数据,后面部分我们以假数据为例
<bootstrap-table ref="detailTable" :columns="detailColumns" :data="detailData" :options="detailOptions"></bootstrap-table>
js里面的代码片段
// js里面的一段代码,表格的表头部分
detailColumns: [
{
title: '电话号码',
field: 'tel',
},
{
title: '投诉时间',
field: 'complaint_time',
},
{
title: '投诉内容',
field: 'complaint_content',
},
]
划重点!!!
设置行背景颜色,使用rowStyle属性即可,想每行有不同的显示颜色,设置一个函数即可,通过逻辑控制颜色显示,当然,字体颜色也是可以类似控制的,就是简单CSS属性更改。
在vue的data里面把与options绑定的数据(我这里是detailOptions)进行绑定即可。
下面是示例代码片段