渲染数值为对应的文字

编辑页面传值是value，详情页面显示value对应的文字
需求：在编辑弹框里面选择性别时 有三个选项 男，女，保密
婚姻状况可选已婚，未婚，是否驻勤可选是，否，当传递到后台的时候是传递的对应的value，在详情展示的时候显示的是value对应的汉字。由于使用的是elementui-ui,我将所有的信息写在了一个el-row中，直接遍历一个对象数组。那么就涉及到值的回显，我的做法是这样的：1定义一个对象数组，数组中的每一个对象都有key,value属性，key是显示在页面的字段，value是对用的实体类的字段名，如果该字段如性别这种，是1，2这样的数字来判断男女的话，就在该对象中在定义一个标识，如other，设置为ture，里面需要写上返回的值对应的男女，如后台返回的性别，1代表男，2代表女，就要这样定义： { name: ‘性别’, value: ‘gender’, other: true, ‘1’: ‘男’, ‘2’: ‘女’, ‘3’: ‘保密’ }；2：定义一个对象，去接收后台返回的信息；3：遍历。具体实现记录下
效果展示：
详情展示编辑弹框:

具体实现：

userInfo: [
        { name: '性别', value: 'gender', other: true, '1': '男', '2': '女', '3': '保密' },,
        { name: '婚姻状况', value: 'maritalStatus', other: true, '1': '已婚', '2': '未婚' },
        { name: '是否驻勤', value: 'isAttendance', other: true, '1': '是', '2': '否' },
      ],
      // 后台返回的实体，是一个对象，这里对象的属性要和userInfo中每个对象的value一一对应
       inf: {
        gender: '',
        maritalStatus: '',
        isAttendance: '',
      },
      // 请求后台接口
       getBasicInfoByUserId(this.inf.userId).then(response => {
        if (response.code === 200) {
        // 赋值
          this.inf = response.data
        }
      })
// 数据渲染
 <div style="font-size: 14px;color: #27314a; line-height: 32px;">
            <el-row :gutter="10">
              <el-col v-for="(item,index) in userInfo" :key="index" :span="12">
              // 这里用到标识去判断
             	 {{ item.name }}:{{ item.other?item[inf[item.value]]:inf[item.value] }}
              </el-col>
            </el-row>
  </div>
  // 或者定义一个formatter方法
   <div style="font-size: 14px;color: #27314a; line-height: 32px;">
            <el-row :gutter="10">
              <el-col v-for="(item,index) in userInfo" :key="index" :span="12">
                 {{ item.name }}：{{formatters(item) }}
               </el-col>
            </el-row>
    </div>
   

mthoods中

    methods: {
   // 格式化显示数据
    formatters(item) {
      console.log(item)
      if (item.other !== undefined && item.other != null) {
        return item[this.inf[item.value]]
      } else {
        return this.inf[item.value]
      }
    }

有问题可加qq 876942434,一起进步~