2、vue2 element-ui 表格 掩码、解密单元格

原有的表格 字段 密文解密 与 手机号掩码等 方法 需要在很多地方使用，既影响业务逻辑整洁度，又容易遗忘，故将 element-ui 的 el-table-column 进行组件封装，以减小页面的代码逻辑

<!-- el-table-column-chpher.vue -->
<template>
    <!-- 为了能使用 el-table-column 的默认功能，使用 v-bind="$attrs" 来传递属性值 -->
    <el-table-column v-bind="$attrs">
        <template slot-scope="scope">
            <!-- 不使用密文字段，直接调用格式化方法进行掩码 -->
            <template v-if="!isChpher">
                <el-tooltip class="item" effect="dark" :content="scope.row[$attrs.prop]" placement="top">
                    <!-- 防止字段为 null / undefined 时，仍然进行格式化 -->
                    <div>{{ scope.row[$attrs.prop] && formatText(scope.row) }}</div>
                </el-tooltip>
            </template>
            <template v-else>
                <!-- 使用密文字段，加载子组件 -->
                <UserChpher :scope="scope" :chpherKey="chpherKey" :prop="$attrs.prop" />
            </template>
        </template>

    </el-table-column>
</template>
<script>
import { currencyApi } from '@a/api';
import Vue from 'vue';

// 由于需要一个独立的字段 来判断接口的请求状态，只能在子组件内部编写逻辑操作
// 但不想单独建立文件，故使用 vue 的原始创建组件方法，单独创建组件
const UserChpher = Vue.component('UserChpher', {
    props: ['scope', 'chpherKey', 'prop'],
    template: `<el-tooltip effect="dark" placement="top">
    <template slot="content">
        <div style="min-width:100px;height:14px;text-align:center">
            <i v-if="Text === null" class="el-icon-loading"></i>
            <span v-else>{{ Text }}</span>
        </div>
    </template>
    <div @mouseover="Decode(scope.row[chpherKey])">{{ scope.row[prop] }}</div>
</el-tooltip>`,
    data() {
        return {
            Text: null,
            isLoad: false,
        }
    },
    methods: {
        // 事件绑定在 mouseover 上，鼠标移动到该字段上时，请求后台对密文进行解密
        DeCode(value) {
            // 让请求方法只请求一次，防止鼠标移动时来回请求后台方法
            if (this.isLoad) return;
            this.isLoad = true;
            this.http.post(currencyApi.getMobile, { encrypt: value }, { headers: { loading: 1 } }).then(res => {
                this.Text = res.data;
            })
        }
    }
})

export default {
    // isChpher 是否使用密文字段
    // chpherKey 需要后台去解密的字段Key值
    props: ['isChpher', 'chpherKey', 'showType'],
    components: {
        UserChpher,
    },
    methods: {
        // 不使用密文字段时，直接使用掩码
        formatText(item) {
            // 为了防止报错，将字段将转成字符串
            // 由于在 HTML 里面判断了字段是否为真值，故不在这进行判断
            const num = item[this.$attrs.prop] + '';

            if (this.showType == 'idCard') {
                // 如果是身份证号，只保留最后4位；了·
                if (!!num) {
                    return (new Array(num.length - 4).fill('*').join('')) + num.slice(num.length - 4, num.length)
                } else {
                    return num
                }
            } else {
                if (!!num) {
                    return num.slice(0, 3) + (new Array(num.length - 7).fill('*').join('')) + num.slice(num.length - 4, num.length)
                } else {
                    return num
                }
            }

        }
    },
}

</script>

使用方法

......

<el-table :data="" ......>
    ......
    <!-- 原始的表格使用方法 -->
    <el-table-column prop="name" label="名称" />
    ......
    <!-- 手机号掩码组件 -->
    <!-- 可以使用 el-table-column 原有的默认参数和方法 -->
    <el-table-column-chpher prop="mobile" label="手机号" align="center" />
    ......
    <!-- 使用密文模式 -->
    <el-table-column-chpher :isChpher="true" chpherKey="CMobileDes" prop="CMobile" label="手机号" align="center" />
    ......
    
    <!-- 如果内容是身份证号 -->
    <el-table-column-chpher showType="idCard" prop="idCard" label="身份证号" align="center" />
 
</el-table>