需求
状态类的展示字体颜色要有变化，比如成功绿色，失败红色等。
之前用table，数据只要格式化就行，全部用的formatter。懒人不想大改，想试试有没有法子可以format为html呢？官网的例子都是格式化数字字符串等，只返回一个简单类型，没有返回html的。想着反正vue支持 jsx 语法，干脆试一下：
{
label: "状态",
prop: "status",
formatter: (row, column, cellValue, index) => {
const value =
cellValue &&
["待支付", "处理中", "已完成"][cellValue];
const stateClass = ["status_error","status_warning","status_success"][
cellValue
];
return <span class={stateClass}>{value}</span>;
},
}
居然成功了，哈哈哈哈，太开心了。
想搜一下有没有其他的方法，结果大部分都是data format和v-html并行,并没有上面的 jsx方便。
后面想试一下formatter和template的效果，发现他俩一起使用不生效。
<el-table-column
v-for="item in columns"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:width="item.width"
:formatter="item.formatter"
>
<template slot-scope="scope">
<span
v-html="scope.row.status"
v-if="item.prop === 'status'"
>
</span>
<span v-else> {{ scope.row[item.prop] }} </span>
</template>
</el-table-column>
scope.row.status 取的是原始值!!!
总结
-
element-ui table formatter支持jsx语法，可以格式化为html -
formatter和template一起使用不生效
