vue 前端 问题整理

列表显示字典数据

template里面的vue代码

 <el-table-column label="性别" align="center" prop="sex"><template #default="scope">
<!--                <dict-tag :options=sysUserSex :value="scope.row.sex"/>-->{{dictDataLabel( scope.row.sex,sysUserSex )}}</template></el-table-column><el-table-column label="婚姻状况" align="center" prop="maritalStatus"><template #default="scope">
<!--                <dict-tag :options="sys_status" :value="scope.row.maritalStatus"/>-->{{dictDataLabel( scope.row.maritalStatus,maritalStatusList )}}</template></el-table-column><el-table-column label="民族" align="center" prop="nation"><template #default="scope">
<!--                <dict-tag :options="sys_user_sex" :value="scope.row.nation"/>-->{{dictDataLabel( scope.row.nation,nationList )}}</template></el-table-column><el-table-column label="政治面貌" align="center" prop="politicalOutlook"><template #default="scope">
<!--                <dict-tag :options="sys_status" :value="scope.row.politicalOutlook"/>-->{{dictDataLabel( scope.row.politicalOutlook,politicalOutlookList )}}</template></el-table-column>

获取数据(手动查询字典数据)

const sysUserSex = ref();
dictByType();
// 手动查询字典数据
function dictByType(){selectDictByKey( 'sys_user_sex' ).then(res => {sysUserSex.value = res.data;})
}const maritalStatusList = ref();
maritalStatusByType();
function maritalStatusByType(){selectDictByKey( 'marital_status' ).then(res => {maritalStatusList.value = res.data;})
}const nationList = ref();
nationListByType();
function nationListByType(){selectDictByKey( 'nation' ).then(res => {nationList.value = res.data;})
}const politicalOutlookList = ref();
politicalOutlookListByType();
function politicalOutlookListByType(){selectDictByKey( 'political_outlook' ).then(res => {politicalOutlookList.value = res.data;})
}

// 获取字典数据和业务表的数据比对,如果是同一个key,会显示对应字典的value

function dictDataLabel( dataValue ,dataList ){if( dataValue ){let dictData = dataList ;let item = dictData.find( item=>item.dictValue == dataValue )if( item){return item.dictLabel;}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/76457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis持久化、主从与哨兵架构详解

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c; Redis 将内存数据库快照保存在名字为 dump.rdb 的二进制文件中。 你可以对 Redis 进行设置&#xff0c; 让它在“ N 秒内数据集至少有 M 个改动”这一条件被满足时&#xff0c; 自动保存一次数…

【Linux】让笔记本发挥余热,Ubuntu20.04设置WiFi热点

Ubuntu20.04设置WiFi热点 由于卧室距离客厅较远&#xff0c;wifi信号太弱&#xff0c;体验极差。鉴于卧室的笔记本电脑是通过网线连接的客厅路由器&#xff0c;因此考虑将这台老破笔记本作为“路由器”&#xff0c;以便发挥它的余热。实验证明&#xff0c;上网速度提升数十倍&a…

Kubectl 使用详解——k8s陈述式资源管理

目录 一、kubectl 简介 二、kubectl 的使用 1.基础用法 &#xff08;1&#xff09;配置kubectl自动补全 &#xff08;2&#xff09;查看版本信息 &#xff08;3&#xff09;查看资源对象信息 &#xff08;4&#xff09;查看集群信息 &#xff08;5&#xff09;查看日志…

taro vue3 ts nut-ui 项目

# 使用 npm 安装 CLI $ npm install -g tarojs/cli 查看 Taro 全部版本信息​ 可以使用 npm info 查看 Taro 版本信息&#xff0c;在这里你可以看到当前最新版本 npm info tarojs/cli 项目初始化​ 使用命令创建模板项目&#xff1a; taro init 项目名 taro init myApp …

英飞凌TC3xx--深度手撕HSM安全启动(三)--TC3xx HSM系统架构

今天聊TC3xx HSM系统,包括所用内核、UCB相关信息、Host和HSM交互方式。 1、HSM系统架构 下图来源于英飞凌官网培训材料。 TC3xx的HSM内核是一颗32位的ARM Cortex M3,主频可达100MHz,支持对称算法AES128、非对称算法PKC(Public Key Crypto) ECC256、Hash SHA2,以及T…

算法通关村第十七关:白银挑战-贪心高频问题

白银挑战-贪心高频问题 1. 区间问题 所有的区间问题&#xff0c;参考下面这张图 1.1 判断区间是否重叠 LeetCode252 https://leetcode.cn/problems/meeting-rooms/ 思路分析 因为一个人在同一时刻只能参加一个会议&#xff0c;因此题目的本质是判断是否存在重叠区间 将区…

30天入门Python(基础篇)——第2天:Python安装(保姆级)与IDE的认识与选择+详细安装教程

文章目录 专栏导读上一节课回顾1、Python解释器的安装查看各个版本的Python解释器①、ok,双击安装②、这里我们选择【自定义】安装&#xff0c; 下面的【将Python添加在环境变量】大家一定要打个勾③、点击【Next】进行下一步④、这里不建议安装在C盘, 点击【Browse】我在F盘创…

C++ 多态

引例&#xff1a; #include<iostream> using namespace std; class Animal { public:void speak(){cout<<"动物在说话"<<endl;} }; class Cat:public Animal { public:void speak(){cout<<"小猫在说话"<<endl;} }; void Do…

多线程和并发编程(2)—CAS和Atomic实现的非阻塞同步

在并发编程中实现原子操作可以使用锁&#xff0c;锁机制满足基本的需求是没有问题的了&#xff0c;但是有的时候我们的需求并非这么简单&#xff0c;我们需要更有效&#xff0c;更加灵活的机制&#xff0c;synchronized关键字是基于阻塞的锁机制&#xff0c;也就是说当一个线程…

CSS整理

目录 CSS中的& 弹性&#xff08;display:flex&#xff09;布局 flex的对齐方式 justify-content align-items flex-wrap 弹性盒换行 flex:1 flex属性 flex-grow&#xff1a;项目的放大比例 flex-shrink&#xff1a;收缩 flex-basis&#xff1a;初始值&#xff…

GE IS220PAICH2A 336A4940CSP11 数字量输入模块产品应用领域

GE IS220PAICH2A 336A4940CSP11 是一款数字量输入模块&#xff0c;通常用于工业自动化和控制系统中&#xff0c;用于监测和采集数字输入信号。这种类型的模块可以在各种应用领域中发挥作用&#xff0c;以下是一些可能的应用领域&#xff1a; 工业过程控制&#xff1a; GE IS220…

count(*) 和 count(1) 有什么区别?哪个性能最好?

哪种 count 性能最好&#xff1f; count() 是什么&#xff1f; count() 是一个聚合函数&#xff0c;函数的参数不仅可以是字段名&#xff0c;也可以是其他任意表达式&#xff0c;该函数的作用是统计符合查询条件的记录中&#xff0c;函数指定的参数不为 NULL 的记录由多少条。…

openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势

文章目录 openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势概述将料头用接料引带加长接料引带的规格将编带送入飞达的编带导引槽物料正常载入完成的子飞达没有错误指示灯END openpnp - 二手西门子电动飞达 - 物料编带安装的正确姿势 概述 手头一堆2手的西门子电动飞达…

盲打键盘的正确指法指南

简介 很多打字初学者&#xff0c;并不了解打字的正确指法规范&#xff0c;很容易出现只用两根手指交替按压键盘的“二指禅”情况。虽然这样也能实现打字&#xff0c;但是效率极低。本文将简单介绍盲打键盘的正确指法&#xff0c;以便大家在后续的学习和工作中能够提高工作效率…

C++之结构体智能指针shared_ptr实例(一百九十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

keep-alive缓存三级及三级以上路由

需求需要缓存这个出入记录&#xff0c;当tab切换时不重新加载&#xff0c;当刷新页面时&#xff0c;或把这个关闭在重新打开时重新加载如图&#xff1a; &#xff08;我这里用的是芋道源码的前端框架) keep-alive 1、include 包含页面组件name的这些组件页面&#xff0c;会被…

MySQL内外连接

MySQL内外链接 内连接显示SMITH的名字和部门名称 外连接左外连接查询所有学生的成绩&#xff0c;如果这个学生没有成绩&#xff0c;也要将学生的个人信息显示出来 右外连接把所有的成绩都显示出来&#xff0c;即使这个成绩没有学生与它对应&#xff0c;也要显示出来列出部门名称…

OpenCV(三十六):霍夫直线检测

1.检测直线的霍夫变换原理 2.检测直线函数HoughLines() 检测直线流程: Step1:将参数空间的坐标轴离散化。 Step2:将图像中每个非0像素通过映射关系求取在参数空间通过的方格 Step3:统计参数空间内每个方格出现的次数&#xff0c;选取次数大于某一值的方格作为表示直线的方格…

【Electron】electron与cljs的处理

实现效果: 前言&#xff1a; 如何用cljs的方式&#xff0c;编写electron应用&#xff0c;可以实现多窗体应用 要使用ClojureScript&#xff08;CLJS&#xff09;编写一个 Electron 应用程序&#xff0c;并实现多窗体功能&#xff0c;您可以按照以下步骤进行操作&#xff1a; …

C语言实现扫雷小游戏

1.首先扫雷游戏要存储布置好的雷信息&#xff0c;需要一个二维数组 不是雷放* 雷&#xff1a;# 不是雷&#xff1a;0 雷&#xff1a;1 2. 给2个二维数组 9*9 一个存放雷的信息&#xff0c;一个存放布置好雷的信息 3.为了防止在统计坐标周围的…