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

有好多后端返回的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;}

显然效果也不错

如何在前端用vue使用字典dicts？相关推荐

vue 回车查询按钮_前后端分离商城，前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接项目简介本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
redirect路由配置 vue_Web前端：Vue路由进阶配置
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:Vue路由进阶配置",有兴趣做前端的朋友,和我一起来看看吧! 1. 页面打开权限流程页面是否能打开有以下两点判断: 1 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
失败原因【object object】_使用前端框架Vue的原因！
1.前端框架的根本意义 1.1 前端框架的好处最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【Vue基础】前端工程化Vue项目
一.创建Vue项目步骤 1.新建一个文件夹,起名为vue_project01 2.在该文件夹中打开cmd,输入指令vue ui,打开图形化界面 3.此时跳转到网页,根据以下步骤配置vue项目 1)项目 ...
【前端】Vue项目：旅游App-博客总结
博客链接 [前端]Vue项目:旅游App-(1)搭建项目.重置css.配置router和store(pinia) https://blog.csdn.net/karshey/article/deta ...
JavaWeb前端框架VUE和Element组件详解
文章目录前言一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...

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

如何在前端用vue使用字典dicts？相关推荐

最新文章

热门文章