Vue中动态展示数据的字典项开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情

问题描述

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

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

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

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

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

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

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

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

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

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

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

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

关键代码如下：

 <!-- 直接展示接口获取到的性别 -->
  <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组件中众多属性的其中一个：

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

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

格式为：

 <!-- 通过formatter格式化status字典项 -->
    <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) 
    }
}