el-table后台返回数字，前台变成对应得汉字

如果接口返回的是：1 2 3 4 5数字，需要换成对应汉字
有以下几种方式：
方法一

if判断

 <el-tableref="multipleTable":data="tableData"bordertooltip-effect="dark"style="width: 100%"><el-table-column prop="id" label="序号" align="center" width="80" /><el-table-column label="等级" align="center" min-width="120"><template slot-scope="scope"><span v-if="scope.row.k_id == 2">一级</span><span v-if="scope.row.k_id == 3">二级</span><span v-if="scope.row.k_id == 4">三级</span></template></el-table-column>    </el-table>

方法二

前端利用字典将其转换为相对应的中文
在项目里创建js文件，内容如下
如只需一组写一个即可，需要转换的比较多，一直写下去即可

export const code = {"1": {"0": '待提交',  //"0"是中文对应的数字，不代表下标  冒号后面是中文"1": '待审核',"2": '审核完成',},"2": {"2": "待审批","3": "已通过","4": "已驳回"}
}

写完在需要的文件里引入，按如下图方式即可转换为相对应的中文

import { code } from "./code"

方法三

在获得详情以后，将查出的值直接做匹配，
但注意一点，这样做匹配后台返回的数据必须是0开始，因为下标从0开始，如果后台返回的数据是1开始，就要注意，匹配会错。

也可以直接在teble表格的时候做匹配，原理一样

上面这三种方法只针对于不变的字典，如果数据需要更改，如上三种方法不适用，所以出来可以写成死对象，还可以根据后台返回的字典存放在一个对象里面，这样就变成了活对象，如果数据改变，前端也无须改变
以下是我在项目中运用的活对象去做数字匹配。
首先是获取到后台的字典，然后存放在对象里

    //获取信用分字典getDict() {//类型this.setDict('cs_type', {}, (r) => {this.csTypeList[r.dictValue] = r.dictLabel})//来源this.setDict('source_type', {}, (r) => {this.sourceList[r.dictValue] = r.dictLabel})},setDict(str, dict, callback) {getData(dict, '/system/dict/data/type/' + str).then(res => {if (res.code == 200) {res.data.forEach((r) => {callback && callback(r)})} else {this.$message({message: res.msg,type: 'error',duration: '2000'})return false}}).catch(() => { })},

只需要在表格中直接使用左侧为对象右侧为返回的数字

el-table后台返回数字，前台变成对应得汉字相关推荐

ios 从前台返回到回台从后台返回到前台或者支付宝支付订单后对界面进行操作...
正常情况下,在AppDelegate中实现下面两个方法,能够监听从后台恢复到前台 - (void)applicationDidEnterBackground:(UIApplication *)appl ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
前台ajax请求php后台返回成功却进error方法解决
前台ajax请求php后台返回成功却进error方法解决参考文章: (1)前台ajax请求php后台返回成功却进error方法解决 (2)https://www.cnblogs.com/anniey ...
（配置消息转换器）解决后台返回json数据到前台时页面时中文显示乱码问题
(配置消息转换器)解决后台返回json数据到前台时页面时中文显示乱码问题 SpringMVC.xml中加 <mvc:annotati ...
img src请求后台值值能判断_图片src拼接后台返回ID
本文地址:http://www.cnblogs.com/veinyin/p/8507403.html 在学习 CSS 时只了解了给固定地址,但是如果给的是一个需要拼接的地址就蒙了,以下是基于 Vue ...
ajax和map返回数据类型,ajax请求后台返回map类型并如何展示
前台jsp或者ftl文件接收返回结果: 注意:value值用单引号,因为后台返回的结果是json字符串前台js接收返回结果: success: function(data){ var result ...
ajax返回实体类字符串,js使用ajax传值给后台,后台返回字符串处理方法
之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次. 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台 ...
vue在js上处理后台返回的数组_vuejs 根据后台返回数组，渲染图片路径
后台返回的数组为: ["5", "1", "3", "2", "1",] 页面要实现对应数量的黄色星 ...

el-table后台返回数字，前台变成对应得汉字

el-table后台返回数字，前台变成对应得汉字相关推荐

最新文章

热门文章