EleemntUI中el-table的formatter格式化字典显示的使用

「爱情、让人受尽委屈。」 2023-10-06 14:26 103阅读 0赞

## 场景 ##

某些类似于用字典(键值对)存储的属性，比如操作员这种

1代表用户id 数组库存储的也是用户id，但是在页面上展示的是用户姓名

数据库中存储czy是数字即用户的id

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

而要在页面上展示的是用户姓名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

一般这种都是在后台写sql语句时使用关联语句关联查询用户表将用户姓名查询出来。

但是这只是用户id和姓名的键值对的映射。

如果是类似于状态等这样的键值对映射的话除了在后台进行关联表进行查询，还可以在前端使用el-table的

formatter进行格式化显示。

首先在页面上添加操作员此列

<el-table v-loading="loading" :data="bcbdlsList" @selection-change="handleSelectionChange">
          <el-table-column label="id" align="center" prop="id" v-if="false" />
          <el-table-column label="操作员" align="center" prop="czy" :formatter="czyFormat" />
    
        </el-table>

然后给此列设置一个formatter

:formatter= "czyFormat"

在对应的格式化方法中

// 操作员字典翻译
        czyFormat(row, column) {
          var name = "";
          this.czyOptions.forEach(function (item, index) {
            if (row.czy == item.userId) {
              name = item.userName;
            }
          });
          return name;
        },

上面的代码就是传递两个参数row是行参数，column是列参数

然后this.czyOption是一个根据用户id和姓名的一个映射的对象数组，遍历这个数组

根据row.czy获取当前行存储的用户id，即1或者2这种，在循环中判断如果与键值对中的用户id属性相等则获取用户的姓名并将其返回。

那么在哪里查询这个键值对映射的数组的数据？

首先声明这个字典数组

data() {
        return {
          // 操作员字典
          czyOptions: [],

然后在created中请求后台数据获取用户列表，这样在页面加载完就能获取到用户对象的list

created() {
        this.getUserList();
    }

在获取数据的方法中

/** 获取操作员数据 */
        getUserList() {
          //获取操作员数据
          listUser(this.user).then((response) => {
            this.czyOptions = response.rows;
          });
        },

将后台查询出来的数据赋值给上面的czyOptions 。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200807085839795.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020080708584141.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi