4、vue2 element-ui 表格 字符串格式化

原有的表格单元格格式化方法，不是 需要用到template，就是 需要挂载 formater 方法，

这很不优雅

有没有一种 直接写字符串进行格式化的方法？

就类似替换啊文字之类的？

于是。。基于 模板字符串的解决方案来了。

<template>
    <el-table-column v-bind="$attrs">
        <template slot-scope="{ row }">
            {{ formatContent(row) }}
        </template>
    </el-table-column>
</template>

<script>
export default {
    props: {
        formatStr: {
            // 格式化模板
            require: true,
        },
    },
    methods: {
        formatContent(row) {
            const keyArray = [];
            const valueArray = [];
            for (const key in row) {
                const element = row[key];
                keyArray.push(key);
                valueArray.push(element);
            };
            const Fun = new Function(keyArray, `return `${this.formatStr}``);
            return Fun.apply(this, valueArray);
        }
    }
};
</script>

这样，就可以做到，简单的字符串格式化方法，直接用模版字符串进行拼接

......

<el-table :data="" ......>
    ......
    <!-- 可以使用 el-table-column 原有的默认参数和方法 -->
    <!-- startDate,endDate 是表格数据中的两个字段 -->
    <el-table-column-format formatStr="${startDate} ~ ${endDate}" align="center" />
    ......

</el-table>