3、vue2 element-ui 表格 字典项单元格

将表格单元格，根据封装好的字典项 directive 进行封装，目的就是减少代码复杂度

(其实就是不想再表格里写 template，一个单元格占三行)

<!-- el-table-column-dict.vue -->
<template>
    <el-table-column v-bind="$attrs">
        <template slot-scope="{ row }">
            <span v-dict:[code]="[row[$attrs.prop], valuekey, showkey]"></span>
        </template>
    </el-table-column>
</template>

<script>
export default {
    props: {
        code: {
            // 字典项名称
            require: true,
        },
        valuekey: {
            // 值是字典项中的哪一个字段
            default: null
        },
        showkey: {
            // 显示字典项对象中的哪一个字段
            default: 'name'
        }
    },
};
</script>

使用方式

......

<el-table :data="" ......>
    ......
    <!-- 可以使用 el-table-column 原有的默认参数和方法 -->
    <!-- code : 字典项的名称（使用哪一个字典） -->
    <!-- valuekey : 值对应字典的哪一个key值 -->
    <!-- showkey : 根据值，找到字典中值对应的对象，显示showkey字段 -->
    <el-table-column-dict prop="city" code="city" valuekey="value" showkey="name" align="center" />
    ......

</el-table>