vue的前后端数据转换

vue中将后台返回的数字转换成对应的文字

记录：因为工作需要，记录自己遇到的问题。

问题：解决前端展示的是汉字男女，而且0,1,2,对应不同的汉字这种类型的问题。

第一种方式：

:formatter=“statusFormatter” 主要是这个 ，格式化我们的数据

<el-table
:data="tableData"
border>
	<el-table-column
        prop="status"
        :show-overflow-tooltip="true"
        label="状态"
        width="60"
        :formatter="statusFormatter"
      >
     </el-table-column>
</el-table>
<script>
	export default{
		data(){
			return{
				tableData:[]
			}
		},
		methods:{
			statusFormatter(row, column){
				const status = row.status
      			if (status == 0) {
        			return '正常'
      			} else if (status == 1) {
        			return '待审批'
      			} else if (status == 2) {
        			return '拒绝'
      			} else if (status == 3) {
			        return '锁定'
      			} else {
        			return '删除'
      			}
			}
		}
	}
</script>

第二种方式：

根据字典进行数据转换

<el-col :span="10">
                <el-form-item label="证件类型：">
                  <dict-tag :options="dict.type.b_merchant_info_lp_id_type" :value="merchantInfo.lpIdType" />
                </el-form-item>

              </el-col>

<el-table-column label="所在场景" align="center" key="merchantId">

        <template slot-scope="scope">
          <dict-tag :options="SceneName" :value="scope.row.merchantId"/>
        </template>
      </el-table-column>

dict.type.b_merchant_info_lp_id_type这个字典内容是结合ruoyi框架里面得到的。这个数据字典是后端里面拿到的

SceneName是自己创建的一个数组，字典的对应关系需要自己来创建对应。我遇到的问题是，通过后端查找数据出来，然后创建对应关系，当然，可以前端固化。

SceneName:[],

  //得到场景名字
    getSceneName() {
      listBizgroup().then(response => {

        response.rows.forEach(element => {
          if (element.id && element.name) {
            let obj = {};
            obj["label"] = element.name;
            obj["value"] = element.id;
            obj["raw"] = {"listClass": "default"};
            this.SceneName.push(obj);
          }
        });
      })

第三种方式：

<el-table-column label="在线状态" align="center" prop="onlineStatus">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.onlineStatus==1">在线</el-tag>
          <el-tag type="danger" v-if="scope.row.onlineStatus==2">离线</el-tag>
          <el-tag type="info" v-if="scope.row.onlineStatus==3">未知</el-tag>
        </template>
      </el-table-column>