根据状态修改layui表格显示的文字及字体颜色

 

当表格有两个或多个不同的状态时，我们可以让不同的状态显示不同文字及字体颜色，比如有两个状态：true和false，我让为状态true的显示“已销售”，状态false的显示“已退货”并将字体改成红色，如图所示：





想要做到这样的效果，首先要在表头参数加上templet(自定义列模板)并给它一个名字,如代码所示：

 

tabReceived= layuiTable.render({
//url: '/DayWorkManagement/FormerSell/selectReceived',
elem: '#tabReceived',
cols: [[
{ type: 'numbers', title: '序号' },
{ type: 'checkbox'},
{ field: 'MarketID', title: '单据ID',hide: true },
{ field: 'MarOddNumber', title: '单号',align: 'center'},
{ field: 'NumberDates', title: '单据日期',align: 'center'},
{ field: 'MarKetState', title: '状态',templet: ZhuangTai, align: 'center'},
{ field: 'MarAmount', title: '数量', align:'center'},
{ field: 'ConMenyer', title: '金额',align: 'center'},
{ field: 'MarKetAddres', title: '备注',align: 'center'},
{ field: 'UserType', title: '操作人',align: 'center'},
{ field: 'OperationDates', title: '更新时间',align: 'center'}
]],
page:{
limit: 10,//每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35,40, 45, 50],//每页条数的选择项
},
data: [],
});

然后写自定义列的方法:

 

//自定义“状态”列
function ZhuangTai(data) {
var MarKetState = data.MarKetState;
if (MarKetState == true) {
return"已销售";
}
if (MarKetState == false) {
return "已退货";
}
}

要加颜色的话，和加自定义按钮差不多，我的是给它加上一个a标签，从而改变它的字体颜色的。
 

function ZhuangTai(data) {
var MarKetState = data.MarKetState;
var btns = "";
if (MarKetState == true) {
return"已销售";
}
if (MarKetState == false) {
btns += '<a class=""style="color:#ed2a4a">已退货</a>';
}
return btns;
}

注意：方法中的字段要和layUI中的一致（注意是大驼峰还是小驼峰）