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