element-ui中的表格数据格式化

最新推荐文章于 2023-12-26 10:05:48 发布

mmmawo

最新推荐文章于 2023-12-26 10:05:48 发布

阅读量1.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mmmawo/article/details/120894266

版权

在前端开发中，当从后台获取的数据显示为数字时，需要根据枚举文档进行转换。本文介绍了两种方法：使用find方法和reduce方法，将数字如1和2转换为对应的枚举值，例如‘正式’和‘非正式’，以实现表格数据的正确显示和格式化。这两种方法都在 Vue.js 的环境下进行了演示，并可以在模板插槽中调用完成数据的格式转换。

摘要由CSDN通过智能技术生成

element-ui中的表格数据格式化

在向后台请求数据时,经常会发生请求回来的值是一个数字

比如这里明明请求的是聘用形式,返回值却是1

这个时候就需要前端自己查看文档,确认数字代表什么了.

一般在项目都有一个文件,里面放了枚举的文档,比如这个项目中就是constant文件夹.

在求中就可以找到数字代表了什么.

现在,我们知道了数字1代表正式,数字2代表了非正式,现在我们只需要将数字转换成里面的value就可以了.

方法一: find 方法

在methods写入方法

  formfind(num) {
      // 通过id找到对应的元素的value
      const val = hireType.find(it => item.id === num)
      if (val) {
        return val.value
      } else {
        return '不能确定'
      }
      // return  ? '正式' : '非正式'
    }
}

然后使用插槽获取到数据直接调用该函数边可以完成格式化