根据状态修改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;
}