如何在前端用vue使用字典dicts？

涛涛英语学不进去

已于 2022-04-09 08:58:04 修改

阅读量1.3w

点赞数 5

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-04-09 08:34:06 首次发布

本文链接：https://blog.csdn.net/niTaoTaoa/article/details/124053672

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

有好多后端返回的status啥的都是0或1，前端不好演示，我又懒，不想专门去写个后端接口。去网上看相关的资料，没找到只有前端简单使用字典的。我试试从若依上把前端那部分写死试试。

直接搜关键字，发现是从这个接口请求的数据

在这里插入图片描述

找到

在这里插入图片描述

我去运行一下这个项目的这个接口，看看返回的是什么样的数据

大概都是这样的显然真正用到的属性就是 dictName 、 dictType 、 remark 、 dictLable 、
dictValue

在这里插入图片描述

。。。。。经过笔者不断努力往下读，发现这里还蛮复杂的，又找到了一个更优雅的方式。先看数据库是这样

在这里插入图片描述

页面里这样写

      <el-table-column label="状态" align="center" prop="status" min-width="100" :formatter="statusFormat" />
      <el-table-column label="交易类型" align="center" prop="orderType" min-width="100" :formatter="tradeTypeFormat"/>
            <el-table-column label="创建时间" align="center" prop="gmtCreate" min-width="100" :formatter="timeFormat" />
      <el-table-column label="更新时间" align="center" prop="gmtUpdate" min-width="100" :formatter="timeFormat"/>

    methods: {
      statusFormat(row, column) {
        if (row.status == 0) {
          return "处理中"
        } else if (row.status == 1) {
          return "已完成"

        } else if (row.status == -1) {
          return "失败"
        }
      },
      tradeTypeFormat(row, column) {
        if (row.orderType == 1) {
          return "购买"
        } else if (row.orderType == 2) {
          return "充值"

        } else if (row.orderType == 3) {
          return "提现"
        }
      }
      ,
            timeFormat(row,column) {
                let date = new Date(row[column.property]);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }