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

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

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

如何在前端用vue使用字典dicts?_第1张图片

找到

如何在前端用vue使用字典dicts?_第2张图片

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

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

如何在前端用vue使用字典dicts?_第3张图片
如何在前端用vue使用字典dicts?_第4张图片

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

如何在前端用vue使用字典dicts?_第5张图片

页面里这样写

      <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;
    }

显然效果也不错

如何在前端用vue使用字典dicts?_第6张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)