6、vue2 element-ui 表格 默认值组件封装

当表格数据没有内容时，显示默认内容

额。。这些东西很简单，但判断条件总是忘记，直接封装组件，写一个全的

<template>
    <el-table-column v-bind="$attrs">
        <template slot-scope="{ row }">
            <span>{{ FilterNull(row[$attrs.prop]) }}</span>
        </template>
    </el-table-column>
</template>

<script>
export default {
    props: {
        defaultStr: {
            // 没有值时，显示默认值
            require: '',
        },
    },
    methods: {
        FilterNull(value) {
            // 一些常见的，所谓空的值和字段
            if ([null, Infinity, undefined, 'null', 'undefined', 'NaN', ''].includes(value) || isNaN(value)) {
                return this.defaultStr
            } else {
                return value
            }
        }
    }
};
</script>

使用方式

......

<el-table :data="" ......>
    ......
    <!-- 可以使用 el-table-column 原有的默认参数和方法 -->
    <!-- defaultStr : 当返回值对象中没有对应字段时，显示这个东西 -->
    <el-table-column-default prop="city" defaultStr="-" align="center" />
    ......

</el-table>