VUE 数据字典展示

最新推荐文章于 2023-09-07 11:28:11 发布
最新推荐文章于 2023-09-07 11:28:11 发布
阅读量2.6k 收藏 4
点赞数 2
分类专栏： VUE 文章标签： vue.js css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pht314057/article/details/111227638
版权
这篇博客介绍了如何在前端使用Element UI组件库来展示不同状态的数据，如提现状态，通过条件渲染实现'申请中'、'已完成'和'已拒绝'的显示。同时展示了两种不同的样式实现，包括常规的文本展示和带边框的标签展示，为表格数据状态的呈现提供了美化方案。
摘要由CSDN通过智能技术生成 
		  <el-table-column label="提现状态" align="center" prop="status" width="200">
                <template slot-scope="scope">
                    <el-col v-if="scope.row.status ==0">申请中</el-col>
                    <el-col v-if="scope.row.status ==1">已完成</el-col>
                    <el-col v-if="scope.row.status ==2">已拒绝</el-col>
                </template>
           </el-table-column>

带边框

				<el-table-column label="状态" align="center" prop="status" width="200">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status ==0">申请</el-tag>
                        <el-tag v-if="scope.row.status ==1">成功</el-tag>
                        <el-tag v-if="scope.row.status ==2">拒绝</el-tag>
                    </template>
                </el-table-column>
影_驰
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue & Element前端项目中的字典列表显示处理
HfswCoder的博客
09-16 953
可以将字典数据定义为一个JavaScript对象，其中键表示字典项的值，值表示字典项的显示文本。通过定义字典数据、创建处理方法，并在组件中使用这些方法，我们能够将字典项的值转换为对应的显示文本，从而实现了更友好的用户界面。在Vue和Element前端项目中，经常会遇到需要显示字典列表的情况，例如性别、状态、类型等等。在处理这些字典列表时，我们需要对数据进行适当的处理和展示，以便用户能够直观地理解和操作。字典数据中查找对应的显示文本。该方法接收一个参数，即字典项的值，然后返回对应的显示文本。
vue 字典配置_笔记: SpringBoot + VUE实现数据字典展示功能
weixin_36435325的博客
12-31 1030
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0"下拉菜单部分渲染v-for="(v, i) in dictionary.flag":label="v.dicttypeName":value="v.dic...
关于实现 Vue 动态数据显示，比如数字 0 或 1 怎么显示为 男 或 女等等的动态显示实现方法
最新发布
Muxiu
09-07 1283
test.vue以上关于数据test.data是数字格式的动态数据显示，有两种实现方法可以实现，方法二的灵活性比较好（比较推荐）
vue数据字典和全局方法的创建与使用
weixin_46194350的博客
04-07 926
vue数据字典和全局方法的创建与使用
Vue中动态展示数据的字典项
见证自己学习,成长的记录
01-11 4486
Vue中动态展示数据的字典项
Vue字典配置_全局字典数据获取、快速转义
weixin_46845368的博客
10-06 3352
Vue.js使用VueEasyDict统一管理静态、接口字典数据，支持快速转义、原始匹配对象获取
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo...
vue 实现数据字典列表功能
实践求真知
10-12 5013
一后端代码 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数据字典下拉框，要回显下拉列表中没有的值？
m0_50441807的博客
03-30 1335
由于自定义指令中的update钩子函数中无法知道接口的数据什么时候才返回，所以需要循环调用updateDom函数，里面是setTimeout，直到接口返回值的时候，才终止循环调用；思路：下拉框的回显，是根据下拉列表数组来回显的，假设下拉列表中没有该值，则无法回显；那么我们把不能回显的值也放到数组里面，只是显示下拉列表的时候隐藏，就可以达到回显的作用了；数据字典中有个enable字段，用于字典的启用和停用；// 这里写死200毫秒，实际后端响应是不确定的。：实际上拿到的是指令所在组件的实例对象；
vue 字典配置_vue 字典
weixin_36255837的博客
12-31 8746
我写的这个标题，大家肯定很疑惑，不知道我说的是什么意思，我在这里简单给大家解介绍一下这里的字典，在vue里面，有很多不需要调用接口的固定下拉菜单内容，会把这个下拉菜单全部封装起来，叫做字典，再把字典放到vue原型上，在页面中通过调用，直接使用，这个也是我在项目中，项目经理使用学到的下面介绍一下怎么使用操作1，在config下面新建一个 dict.js文件export default {auditS...
项目数据字典构建方法介绍
01-23
项目数据字典构建方法介绍,每个字段的简单说明
uniapp组件-uni-tag标签
热门推荐
03-02 1万+
官方示例：https://ext.dcloud.net.cn/plugin?id=35 Tag 组件，用于展示1个或多个文字标签，可点击切换选中、不选中的状态 一、实心标签 <template> <view> <uni-tag text="标签" style="width: 61px;text-align: center;" /> <uni-tag text="标签" type="primary" style="width: 61px;text
从零开始的VUE项目-13（字典数据管理）
木卯彳亍的博客
07-27 2423
字典管理
vue+elmentUI字典值列表展示中文方法
Winsom1的博客
09-09 2169
vue中formatter方法的使用 两种方式都可以，主要是后台传过来数据，有的是字母比如，NY之类的，N代表好，Y代表不好，我们在页面显示时候要显示文字，这个时候用 <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"/> JS： dateFormat(row, column, cellValue, index){ const daterc = row[column.prop
笔记: SpringBoot + VUE实现数据字典展示功能
CJG753951的博客
02-28 3619
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ 项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0" 下拉菜单部分渲染 <el-col :xs="12" :sm="12" :md="12" :lg="12"> <el-form-...
vue前端数据字典渲染数据
weixin_44849938的博客
04-18 2508
vue前端数据字典渲染数据
ant-design-vue UI组件使用讲解
06-10
通过jeecg-boot项目实战，详细介绍 ant-design-vue UI组件使用，细致的讲解每个组件的用法，教你学会如何看ant-design-vue的官方文档。对于初学入门者来讲，非常实用。
【vue】数据字典和 模块设计
Write less，do more
01-18 800
<template> <el-main> <h1>数据字典</h1> <div class="search-box" style="overflow:hidden"> <div style="float:right"> <el-button type="primary" size="small" @click="showDialog('add')">新增字典</e...
vue中前端数据字典格式化的简单实现
玉之之的博客
06-29 1172
如图，目前需要将code转化为汉字 再对应所需要更改的表头上加上 :formatter="forstatus" 其中forstatus为自定义替换的方法 //过滤流转状态 forStatus(row,column,cellValue,index){ // if(cellValue === '1'){ // return "流转中" // } else if(cellValue === '2'){
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>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值