表格数据中文展示

最新推荐文章于 2024-10-01 18:51:18 发布

Scarlett_Hao

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量104

点赞数

文章标签： java 数据库开发语言

本文链接：https://blog.csdn.net/weixin_57541715/article/details/130731869

版权

该文章展示了如何在Vue.js应用中使用自定义模板和data中的映射对象来实现表格列中权限的翻译。通过<el-table-column>组件，结合<templateslot-scope>，对query和material相关的权限进行显示，利用translatePermission方法从permissionTranslations映射中获取对应的中文描述，如果未找到，则返回原始权限值。

摘要由CSDN通过智能技术生成

模板

<el-table-column
    prop="authority"
    label="权限"
    width="220"
>
    <template slot-scope="scope">
        <el-tag v-for="item in scope.row.authority" :key="item">
            <!-- {{ item }} -->
            {{ translatePermission(item) }}
        </el-tag>
    </template>
</el-table-column>

data中定义

permissionTranslations: new Map([
  ['query:view', 'Query干预：查看'],
  ['query:createEdit', 'Query干预：创建&编辑'],
  ['query:publish', 'Query干预：上线&下线'],
  ['query:delete', 'Query干预：删除'],
  ['material:view', '素材干预：查看'],
  ['material:createEdit', '素材干预：创建&编辑'],
  ['material:publish', '素材干预：上线&下线'],
  ['material:delete', '素材干预：删除'],
]),

methods中

// permissionTranslations对象的get方法获取权限项对应的中文展示，如果找到了翻译则返回，否则返回权限项的原始值。
translatePermission(permission) {
    return this.permissionTranslations.get(permission) || permission;
},