根據狀態修改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中的一致（注意是大駝峯還是小駝峯）