layui 表格字体_根据状态修改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 += '已退货';

}

return btns;

}