vue中前端数据字典格式化的简单实现

最新推荐文章于 2023-05-30 17:02:02 发布
最新推荐文章于 2023-05-30 17:02:02 发布
阅读量1.1k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45645324/article/details/125522120
版权

如图，目前需要将code转化为汉字

 

 再对应所需要更改的表头上加上 :formatter="forstatus" 其中forstatus为自定义替换的方法

  //过滤流转状态

        forStatus(row,column,cellValue,index){

          // if(cellValue === '1'){          

          //   return "流转中"

          // } else if(cellValue === '2'){      

          //   return "流转完"

          // } else if(cellValue === '3'){

          //   return "阅文库"

          // } else if(cellValue === '4'){

          //   return "从本地引入资料"

          // } else{

最低0.47元/天 解锁文章
玉之之
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端数据字典的最优方案探索
2401_84435555的博客
05-01 59
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-hFErD9D9-1714577243244)]
vue 字典配置_笔记: SpringBoot + VUE实现数据字典展示功能
weixin_39847732的博客
12-22 1771
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0"下拉菜单部分渲染v-for="(v, i) in dictionary.flag":label="v.dicttypeName":value="v.dic...
vue 实现数据字典列表功能
实践求真知
10-12 4959
一后端代码 1 接口 public interface DictService extends IService<Dict> { // 根据数据id查询子数据列表 List<Dict> findChlidData(Long id); } 2 接口实现 @Service public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictServic.
vue+elmentUI字典值列表展示中文方法
Winsom1的博客
09-09 2093
vue中formatter方法的使用 两种方式都可以，主要是后台传过来数据，有的是字母比如，NY之类的，N代表好，Y代表不好，我们在页面显示时候要显示文字，这个时候用 <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"/> JS： dateFormat(row, column, cellValue, index){ const daterc = row[column.prop
vue-element-admin框架中el-table后台返回数字，前台变成对应得汉字
weixin_40030173的博客
09-10 8303
如接口返回：2 3 4，需要换成对应汉字 方法一、 <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" > <el-table-column prop=...
数字转中文
Listest的博客
01-21 322
export const numToChinese = num => { if (!/^\d*(\.\d*)?$/.test(num)) { alert('Number is wrong!') return 'Number is wrong!' } var AA = new Array('零', '一', '二', '三', '四', '五', '六', '七', '八', '九') var BB = new Array('', '十'.
avue-crud-数据字典（网络-dicUrl:返回数据格式data:）
最新发布
02-26
"avue-crud-数据字典（网络-dicUrl:返回数据格式data:）"涉及的知识点包括：avue框架的使用、CRUD操作、数据字典的概念、动态获取数据字典的网络请求以及返回的数据格式，以及初始化环境配置文件在项目中的作用和...
vue使用i18n实现国际化的方法详解
12-10
在开发Web应用时，尤其是面对全球用户，实现国际化（i18n）是必不可少的，以便为不同国家和地区的用户提供本地化的体验...此外，还可以利用vue-i18n的其他高级特性，如插槽、数字和日期格式化等，以满足更复杂的需求。
商城开发文档.rar_商城数据字典
01-10
数据字典是系统设计中的重要工具，它记录了系统中所有数据元素的定义、来源、用途、格式和关系。在“商城数据字典”中，常见的数据元素可能包括： 1. 商品信息：包括商品ID、名称、描述、价格、库存、分类、主图、...
ruoyi-vue-pro:基于SpringBoot，Spring Security，JWT，Vue＆Element的前一次分离权限管理系统
03-06
平台简介芋道是基于重构，一套全部...配置系统菜单，操作权限，按钮权限标识等部门管理：配置系统组织机构（公司，部门，小组），树结构展现支持数据权限职位管理：配置系统用户所属职位字典管理：对系统中经常使用的
毕业论文ssm269基于Vue的购物商城网站的设计与实现+vue论文.doc
08-10
数据字典和数据流图进一步细化了数据处理过程，明确了数据的来源、流向和处理方式。详细设计阶段，论文可能涵盖了界面设计、接口设计、数据库结构设计等内容，确保系统各模块之间的协调工作。 在实现阶段，论文遵循...
项目数据字典构建方法介绍
01-23
项目数据字典构建方法介绍,每个字段的简单说明
前端阿拉伯数字转为汉字的方法
mxh_CSDN的博客
03-30 2139
拉伯数字转为汉字
后台返回字典值，前端在表格中根据接口返回得数字或者对应code展示文字实现
zwjl1017的博客
05-30 877
v2+js+element ui 实现字典匹配渲染表格
如何在前端用vue使用字典dicts？
热门推荐
niTaoTaoa的博客
04-09 1万+
有好多后端返回的status啥的都是0或1，前端不好演示，我又懒，不想专门去写个后端接口。去网上看相关的资料，没找到只有前端简单使用字典的。我试试从若依上把前端那部分写死试试。 直接搜关键字，发现是从这个接口请求的数据 找到 我去运行一下这个项目的这个接口，看看返回的是什么样的数据 ...
Python基础之字典练习
CHINA_2000chn的博客
09-13 1511
字典的增删改查 1.查看字典的长度 2.通过key查看字典的value 3.替换字典里的key 4.通过key删除字典的某个键值对 5.字典添加键值对 6.用del方法删除字典 谢谢观看！
vue 字典列表下拉选择组件
weixin_45274678的博客
03-31 790
父组件 <code-select :type="2" @selected="getCodeVal($event,'education')"></code-select> getCodeVal(e,name){ this.expert[name] = e; } 子组件 <template> <Select v-model="codeVal" @on-change="emitVal"> <Option v-for="ite
Vue匹配数据字典/封装组件（小demo）
百变魔旅
11-23 1974
需求：把表格第2、3列的文字，加上颜色 第1列 第2列 第3列 第4列 标题1 10 20 30 标题2 40 50 60 #后台配置color，可能不止是2、3列变色！ items: { "list": [ ["标题1", 10, 20, 30], ["标题2", 40, 50, 60], ["标题3", 70, 80, 90], ], "color": [ { "index": 1, "color": "#2c8
vue3 模板中如何格式化数据
supming1的专栏
08-26 2024
vue3去掉了过滤器，那么我们如何在模板中做一些格式化之类的功能呢？以下是几种实现方式。 1、简单的可以利用计算属性格式化之后显示 2、在组件中写方法，在模板中调用 3、可以采用全局属性的方式代替，这种比较符合我们要的效果。 main.js app.config.globalProperties.$filters = { // 挂载全局属性 formatTime(){ // do some thing return .... } } .
vue数据字典前端实现
09-06
在Vue中实现前端数据字典可以通过以下步骤进行： 1. 首先，在后端维护好字典类型和对应的字典值。可以使用一个API来获取字典数据。 2. 在前端，可以通过调用后端提供的API来获取字典数据。可以使用Vue的生命周期钩子函数或者watch来监听数据字典类型的变化，当数据字典类型的值发生变化时，调用API获取对应的字典值。 3. 在Vue组件中，可以使用一个Vue实例的变量来存储字典值，比如`dictionaryItemList`。当获取到字典值后，将其赋值给`dictionaryItemList`。 4. 在模板中，可以使用v-for指令遍历`dictionaryItemList`，将字典值展示在下拉列表或其他地方。 下面是一个简单的示例代码，用于展示如何在Vue中实现前端数据字典： ```javascript <template> <div> <select v-model="selectedItem"> <option v-for="item in dictionaryItemList" :value="item.value">{{ item.label }}</option> </select> </div> </template> <script> export default { data() { return { code: 'gender', // 数据字典类型代码 dictionaryItemList: [], // 存储字典值的数组 selectedItem: '' // 选择的字典项 } }, watch: { code: { immediate: true, handler: 'loadData' } }, methods: { loadData() { if (this.code) { this.dictionaryItemList = [] // 清空之前的字典值 this.$api.system.dictionaryType.getItem(this.code).then(res => { this.dictionaryItemList = res.data // 获取到字典值后赋值给dictionaryItemList }) } } } } </script> ``` 在上面的示例代码中，`code`表示数据字典类型的编码，`dictionaryItemList`用于存储字典值，`selectedItem`表示当前选中的字典项。通过watch监听`code`的变化，当`code`发生变化时，调用`loadData`方法获取对应的字典值，然后将其赋值给`dictionaryItemList`。在模板中，使用v-for指令遍历`dictionaryItemList`生成下拉列表的选项。 注意，上述示例代码中的`this.$api.system.dictionaryType.getItem`是一个示例API，具体的API调用需要根据实际情况进行修改。 总结起来，Vue中实现前端数据字典可以通过监听数据字典类型的变化，在合适的时机调用API获取字典值，并将其存储在Vue实例的变量中，然后在模板中展示字典值。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值