5、vue2 element-ui 表格 tooltip 单元格功能

额 很简单的给表格单元格增加一个 tooltip 的功能。 顺便给父级加一个显示超出显示省略号的功能

<!-- el-table-column-tooltip.vue -->
<template>
    <el-table-column v-bind="$attrs">
        <template slot-scope="{ row }">
            <el-tooltip effect="dark" placement="top">
                <div slot="content" class="TooltipContent">
                    <pre><code>{{ formatCode(row[$attrs.prop]) }}</code></pre>
                </div>
                <div class="ContentText">{{ row[$attrs.prop] }}</div>
            </el-tooltip>
        </template>
    </el-table-column>
</template>

<script>
export default {
    props: {
        formatStr: {
            // 格式化模板
            require: true,
        },
    },
    methods: {
        formatCode(value) {
            try {
                // 一个小彩蛋，当返回值是 JSON 格式时，顺便格式化一下返回值
                return JSON.stringify(JSON.parse(value), null, '  ')
            } catch (error) {
                return value
            }
        }
    }
};
</script>
<style scoped>
.TooltipContent {
    max-width: 400px;
}

.TooltipContent code {
    max-width: 400px;
    font-family: Consolas;
}

.ContentText {
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

使用方法。。。。与正常的表格单元格一致。。。并没有什么变化