VUE table column数据格式化
案例一:更改数据格式;将后端返回的状态码更改成状态码对应的描述:文字描述
// html部分
<el-table-column
label="所属公司"
prop="group"
:formatter="groupFormate"
></el-table-column>
// js部分
groupFormate(row) {
switch (row.group) {
case "0000":
return "A公司";
case "0001":
return "B公司";
case "0002":
return "C公司";
case "0003":
return "D公司";
case "0004":
return "E公司";
case "0005":
return "F公司";
case "0006":
return "G公司";
default:
break;
}
},
用用场景:
vue后台项目,展示列表页面中有一列数据后端返回的是少许的状态码格式,这个时候我们需要根据不同的状态码对应的公司名称展示在列表中;
案例二:列表内容过长超出部分省略号代替
// html部分
<el-table-column
prop="merchantProfile"
label="用户简介"
show-overflow-tooltip
:formatter="contentFormatter"
></el-table-column>
// js部分
contentFormatter(row, column, cellValue, index) {
// 内容为空时显示的内容
if (cellValue == "") {
cellValue = "无商户简介";
}
return cellValue.length > 30 ? cellValue.slice(0, 30) + "..." : cellValue;
},