Vue中动态展示数据的字典项

r囧r小猫 2023-09-23 21:56 171阅读 0赞

## 问题描述 ##

今天在写自己网站的时候，遇到一个问题，不知道各位前端初学者有没有遇到过这个问题

如图所示：我通过接口查询到一些信息，有两个属性是枚举数据(魔法值)

我们称这种数据为字典项，因为开发中一般称0，1，2称这种数据为字典项，而他们的集合成为字典

> 比如说sex(性别)是一个字典项，它有两个字典项:0代表女,1代表男

![在这里插入图片描述][411689cc83dd4be0868b5d47e52b3e43.png]

当然，作为后端人员，想处理这种问题简直不要太简单，我可以通过mysql的case when函数，或者在service进行三元运算符等逻辑处理都是可以的。

但是我今天想在前端解决这个问题，经过我的研究，找到了两种实现方式，正好我有两个数据都是这样类型的，那就一种方式解决一个把。

## 解决问题 ##

解决问题之前，我觉得不管是处于前端还是后端工作人员，都应该知道字典项的含义，在我的项目里，是这么定义的：

![在这里插入图片描述][6caeb09a22664c7f836bff426200a2d7.png]

搞清楚字典和字典项之后，就可以编写逻辑判断代码了

### 方式1 使用插槽 ###

这种方式就是使用vue中的插槽，根据scope.row.x获取改行的某个属性，然后根据三元运算符动态的区进行判断和展示数据

scope.row可以传这一行数据的所有属性作为参数，删除的时候就可以使用它把id传过来进行删除

> 为了方便对比，我把两个展示性别的代码放在一起进行比较

![在这里插入图片描述][4a162d4f3c24453689ba75438a0a4049.png]

这样页面上就是我们想要的数据了，而不是枯涩的字典值

![在这里插入图片描述][1d2be1a0de104cad918ab643eff92200.png]  
关键代码如下：

<el-table-column
          prop="sex"
          label="性别"
          width="90"
          align="center"
        ></el-table-column>
    
        
         <el-table-column label="性别" width="60" align="center"  prop="sex">
             <template slot-scope="scope">{
        {
         scope.row.sex === 0 ? '女' : '男' }}</template>
          </el-table-column>
        <el-table-column

### 方式2 使用formatter格式化 ###

使用formatter，它是element-ui的table组件中众多属性的其中一个：

![在这里插入图片描述][dcea8b803dff4a0fa410a31e3607f34f.png]

也可以找到它的使用说明：

![在这里插入图片描述][251d0188245345a28db6dff4ef4eeb50.png]

它使用起来也很简单，简单来说就是可以给table的表头一个formatter属性，用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

格式为：

<el-table-column
          prop="status"
          label="状态"
          width="90"
          align="center"
          :formatter="formatter"
        ></el-table-column>
    
     methods: {
        
        formatter(row,column) {
        
          console.log('row='+row)
          console.log('column'+column) 
        }
    }

row和column这两个参数，都是对应的某一条完整的数据

首先看下row吧

![在这里插入图片描述][53a66ccb81904551aabb9119a6217373.png]  
可以看到，有几条数据就有几条row

![在这里插入图片描述][f3d2fd3440154483b86cc9ba2ad755eb.png]

点击某条row,可以看到这条row里面的全部字段信息

![在这里插入图片描述][e5fb35b1e3b74d58a6f8c88bcf8b82ea.png]

接下来是cloumn

![在这里插入图片描述][0af1797ec3cf4614a4e9d11ebe1f9705.png]

其实和row一样的

![在这里插入图片描述][0b443fc365994ea983274489872da649.png]

所以我个人喜欢用row去做格式化判断，通过row.x获取该行的属性进行格式化判断

但是如果声明了column参数但是不适用，页面就编译不了，所以我通常只会保存row参数，舍去column参数

![在这里插入图片描述][667829ccd8d34d848a759e5ef5914714.png]  
![在这里插入图片描述][e26d16a1b48a478c833aafa872cfe0f8.png]

所以完整写法应该是：

> 这里我依然是暴露了格式化和原生两种方式做对比

![在这里插入图片描述][fa48f842c15e41f285c8ea8e9e87c84b.png]

也是可以正常展示我们想要的数据的

![在这里插入图片描述][b00fef13c8974278b420849849246432.png]

## 扩展 ##

### 1. formatter函数自定义 ###

不要觉得formatter函数一定要叫formatter，可以根据自己的业务场景灵活改变的，比如我这个是判断status的，我就可以把formatter对应的函数名称改为statusFormatter，效果也是一样的  
![在这里插入图片描述][044d567957974ebda86b63fc62278774.png]  
![在这里插入图片描述][2c7bb2eb56684af59cb8140994b0f29d.png]  
前面的:formatter可不能改啊，这是官网定义好的，如果改了就不行了！

![在这里插入图片描述][701a1ef0484b4ea78783a41f2faedb1a.png]

倒不是说会报错，只是不生效

![在这里插入图片描述][2c30580667374efd96d5386a35332288.png]

### 使用column代替row格式化 ###

上面提到过，row和column是一样的，name既然row可以做到，column是不是也可以做到呢？

答案是可以的，不过我更喜欢使用row，因为row就是行的意思，在此处代表的就是一行，显得更加形象

![在这里插入图片描述][04e57010129d48d4a0a6e61c2555ed41.png]

效果也是一样的：

![在这里插入图片描述][562146fcd06042a2aaf1c1ce552564a7.png]

## 2.26更新(多个字典项) ##

我发现上面的写法由于我用的是三目运算符嘛，所以在两个字典项的时候是好使的，但是如果多个字典项，这种方式就不太好了。正好今天遇到了这种情况，简单补充下

如图：我这两个字段的字典项都是2个以上的

![在这里插入图片描述][95b312ae201a49c0b25fabe21b2f69ac.png]

处理这种情况，还是可以使用formatter的方式，写法也基本类似，代码如下：

![在这里插入图片描述][c096a52e528b464f8679f07de77f593e.png]

不要着急直接返回，通过if判断属性的值，把符合的值返回出来

由于逻辑一样，我就把第二个方法收起来了，只展示第一个方法

当然也能通过v-if在页面判断。或者定义一个字典数组。最好是通过后端获取字典数组，不然放在前端老修改挺麻烦的。

![在这里插入图片描述][0e4ca790c5014b9b92865c5c63baaca3.png]

简单看下效果吧：

![在这里插入图片描述][3ee2f49740ae417b832afb88cc8b05c9.png]

## 总结 ##

以上就是我发现的两种动态展示字典项的方式了，大家根据各自的需求两个选择即可，我个人更喜欢第一种。

当然不止这两种方式，如果有别的方式或者好用的第三方库也欢迎评论留言

我是后端开发，描述的可能不是很清楚，如果有哪里出错，欢迎评论或者私信告诉我，希望多多包涵。

[411689cc83dd4be0868b5d47e52b3e43.png]: https://img-blog.csdnimg.cn/411689cc83dd4be0868b5d47e52b3e43.png
[6caeb09a22664c7f836bff426200a2d7.png]: https://img-blog.csdnimg.cn/6caeb09a22664c7f836bff426200a2d7.png
[4a162d4f3c24453689ba75438a0a4049.png]: https://img-blog.csdnimg.cn/4a162d4f3c24453689ba75438a0a4049.png
[1d2be1a0de104cad918ab643eff92200.png]: https://img-blog.csdnimg.cn/1d2be1a0de104cad918ab643eff92200.png
[dcea8b803dff4a0fa410a31e3607f34f.png]: https://img-blog.csdnimg.cn/dcea8b803dff4a0fa410a31e3607f34f.png
[251d0188245345a28db6dff4ef4eeb50.png]: https://img-blog.csdnimg.cn/251d0188245345a28db6dff4ef4eeb50.png
[53a66ccb81904551aabb9119a6217373.png]: https://img-blog.csdnimg.cn/53a66ccb81904551aabb9119a6217373.png
[f3d2fd3440154483b86cc9ba2ad755eb.png]: https://img-blog.csdnimg.cn/f3d2fd3440154483b86cc9ba2ad755eb.png
[e5fb35b1e3b74d58a6f8c88bcf8b82ea.png]: https://img-blog.csdnimg.cn/e5fb35b1e3b74d58a6f8c88bcf8b82ea.png
[0af1797ec3cf4614a4e9d11ebe1f9705.png]: https://img-blog.csdnimg.cn/0af1797ec3cf4614a4e9d11ebe1f9705.png
[0b443fc365994ea983274489872da649.png]: https://img-blog.csdnimg.cn/0b443fc365994ea983274489872da649.png
[667829ccd8d34d848a759e5ef5914714.png]: https://img-blog.csdnimg.cn/667829ccd8d34d848a759e5ef5914714.png
[e26d16a1b48a478c833aafa872cfe0f8.png]: https://img-blog.csdnimg.cn/e26d16a1b48a478c833aafa872cfe0f8.png
[fa48f842c15e41f285c8ea8e9e87c84b.png]: https://img-blog.csdnimg.cn/fa48f842c15e41f285c8ea8e9e87c84b.png
[b00fef13c8974278b420849849246432.png]: https://img-blog.csdnimg.cn/b00fef13c8974278b420849849246432.png
[044d567957974ebda86b63fc62278774.png]: https://img-blog.csdnimg.cn/044d567957974ebda86b63fc62278774.png
[2c7bb2eb56684af59cb8140994b0f29d.png]: https://img-blog.csdnimg.cn/2c7bb2eb56684af59cb8140994b0f29d.png
[701a1ef0484b4ea78783a41f2faedb1a.png]: https://img-blog.csdnimg.cn/701a1ef0484b4ea78783a41f2faedb1a.png
[2c30580667374efd96d5386a35332288.png]: https://img-blog.csdnimg.cn/2c30580667374efd96d5386a35332288.png
[04e57010129d48d4a0a6e61c2555ed41.png]: https://img-blog.csdnimg.cn/04e57010129d48d4a0a6e61c2555ed41.png
[562146fcd06042a2aaf1c1ce552564a7.png]: https://img-blog.csdnimg.cn/562146fcd06042a2aaf1c1ce552564a7.png
[95b312ae201a49c0b25fabe21b2f69ac.png]: https://img-blog.csdnimg.cn/95b312ae201a49c0b25fabe21b2f69ac.png
[c096a52e528b464f8679f07de77f593e.png]: https://img-blog.csdnimg.cn/c096a52e528b464f8679f07de77f593e.png
[0e4ca790c5014b9b92865c5c63baaca3.png]: https://img-blog.csdnimg.cn/0e4ca790c5014b9b92865c5c63baaca3.png
[3ee2f49740ae417b832afb88cc8b05c9.png]: https://img-blog.csdnimg.cn/3ee2f49740ae417b832afb88cc8b05c9.png