element-ui table formatter 为html

需求 状态类的展示字体颜色要有变化，比如成功绿色，失败红色等。 之前用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 一起使用不生效 传送门 babel-plugin-transform-vue-jsx babel-preset-jsx

本文章由javascript技术分享原创和收集