当前位置: 首页 > news >正文

誉天在线项目~ElementPlus实现浏览页面注意点

浏览按钮

点击浏览按钮,传递列表数据索引值。
根据索引值从列表数据数组中获取当前行数据。

<el-button @click="toView(scope.$index)" type="success" size="small"><el-icon><EditPen /></el-icon> 浏览</el-button>const toView = (index)=>{form.data = {...form.data,...state.tableData[index]		//回显数据}

vue表达式{{name}} 直接回显数据

el-form-item label="机构名称">{{form.data.companyName}}</el-form-item>

回显带 html的数据

如含有html标签

<el-form-item label="适用人群"><span v-html="form.data.users"></span></el-form-item>

循环展示数组中的值

      <el-form-item label="课程标签"><el-tagv-for="tag in dynamicTags":key="tag"class="mx-1":disable-transitions="false"style="margin:5px;">{{ tag }}</el-tag></el-form-item>

根据编号展示名称

先从后台查询出数据,存放到数组中

// 课程等级204
let gradeOptions = ref([])
GetDict(204).then(res=>{gradeOptions = res}).catch(err=>{console.log(err)})

利于数组的find方法找到code对应的desc

<el-row><el-col :span="12"><el-form-item label="课程等级">{{ gradeOptions.find(o=>o.code===form.data.grade).desc }}</el-form-item></el-col><el-col :span="12"><el-form-item label="教学模式">{{ teachmodeOptions.find(o=>o.code===form.data.teachmode).desc }}</el-form-item></el-col>
</el-row>

回显图片

        <el-form-item label="课程封面"><img :src="`../../upload/${form.data.pic}`" width="500"></el-form-item>

相关文章:

誉天在线项目~ElementPlus实现浏览页面注意点

浏览按钮 点击浏览按钮&#xff0c;传递列表数据索引值。 根据索引值从列表数据数组中获取当前行数据。 <el-button click"toView(scope.$index)" type"success" size"small"><el-icon><EditPen /></el-icon> 浏览<…...

神经网络-pytorch版本

pytorch神经网络基础 torch简介 torch和numpy import torch import numpy as np np_datanp.arange(6).reshape((2,3)) torch_datatorch.from_numpy(np_data) tensor2arraytorch_data.numpy() print(np_data,"\n",torch_data,"\n",tensor2array)torch的数…...

uniapp vue 页面传参问题encodeURIComponent

页面传参objet json序列化后可能会报错 Uncaught SyntaxError: missing ) after argument list 但不一定是数据有问题&#xff0c;而是json成字符串后&#xff0c;字符串中有特殊字符&#xff0c;所以导致parse的时候格式不对。所以解决方案如下 如果传递参数为对象的时候&…...

【GDAL】tif影像拼接和目标截取

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 文章目录 一、gdal.Warp拼接tif二、截取1.通过经纬范围截取拼接的影像2.通过shp范围截取凭借后影像 三、WarpOptions其他参数四、其他方式裁剪1.通过sh…...

ARM核心时间线

指令集架构处理器家族(ARM RISC)ARMv1ARM1ARMv2ARM2、ARM3ARMv3ARM6、ARM7ARMv4StrongARM、ARM7TDMI、ARM9TDMIARMv5ARM7EJ、ARM9E、ARM10E、XScaleARMv6ARM11、ARM Cortex-MARMv7ARM Cortex-A、ARM Cortex-M、ARM Cortex-RARMv8-A armv8.2Cortex-A35、Cortex-A50系列[18]、Cor…...

【Redis】深入探索 Redis 的数据类型 —— 列表 List

文章目录 一、List 类型介绍二、List 类型相关命令2.1 LPUSH 和 RPUSH、LPUSHX 和 RPUSHX2.2 LPOP 和 RPOP、BLPOP 和 BRPOP2.3 LRANGE、LINDEX、LINSERT、LLEN2.4 列表相关命令总结 三、List 类型内部编码3.1 压缩列表&#xff08;ziplist&#xff09;3.2 链表&#xff08;lin…...

高精度乘除法(超详细)

高精度乘除法&#xff08;超详细&#xff09; 题目1-高精度乘法 给定两个非负整数&#xff08;不含前导 0&#xff09; A 和 B&#xff0c;请你计算 AB 的值。 输入格式 共两行&#xff0c;第一行包含整数 A&#xff0c;第二行包含整数 B。 输出格式 共一行&#xff0c;包含…...

List 获取前N条数据

1.使用for循环遍历 public static void main(String[] args) {int limit 5;List<Integer> oldList Lists.newArrayList(1, 2, 3, 4, 5, 6, 7);List<Integer> newList Lists.newArrayList();if (oldList.size() < limit) {newList.addAll(oldList);return;}fo…...

Spring入门控制反转(或依赖注入)AOP的关键概念 多配置文件与web集成

目录 1. 什么是spring&#xff0c;它能够做什么? 2. 什么是控制反转(或依赖注入) 3. AOP的关键概念 4. 示例 4.1 创建工程 4.2 pom文件 4.3 spring配置文件 4.4 示例代码 4.4.1 示例1 4.4.2 示例2 &#xff08;abstract&#xff0c;parent示例&#xff09; 4.4.3 使…...

排序算法-希尔排序

属性 1. 希尔排序是对直接插入排序的优化。 2. 当gap > 1时都是预排序&#xff0c;目的是让数组更接近于有序。当gap 1时&#xff0c;数组已经接近有序的了&#xff0c;这样就会很 快。这样整体而言&#xff0c;可以达到优化的效果。我们实现后可以进行性能测试的对比。 3.…...

ClientDataSet运行中出现“ClientDataSet:dataset not in edit or insert mode”(一)

在打开数据表文件&#xff0c;对ClientDataSet执行Append或Insert时&#xff0c;“ClientDataSet&#xff1a;dataset not in edit or insert mode”&#xff1a; 一、搜索问题 1、执行“显示数据后”&#xff0c;再执行Append&#xff0c;出错&#xff0c;说明ClientDataSet处…...

华为GaussDB数据库

Gauss数据库初识_高斯数据库_ygpGoogle的博客-CSDN博客 Redhat 7.6安装GaussDB_100_1.0.1详细攻略_gaussdb_100_1.0.1-database-redhat-64bit.tar.gz dow_博德1999的博客-CSDN博客 https://www.ngui.cc/el/3381579.html?actiononClick 初识GaussDB——GaussDB的发展历程、部…...

Flink、Spark、Hive集成Hudi

环境描述: hudi版本:0.13.1 flink版本:flink-1.15.2 spark版本:3.3.2 Hive版本:3.1.3 Hadoop版本:3.3.4 一.Flink集成Hive 1.拷贝hadoop包到Flink lib目录 hadoop-client-api-3.3.4.jar hadoop-client-runtime-3.3.4.jar 2.下载上传flink-hive的jar包 flink-co…...

百度编辑器 Ueditor 视频上传时 目录创建失败 解决办法

找到百度编辑器的上传类 Uploader.class.php文件.大约111左右 //$this->stateInfo $this->getStateInfo("ERROR_CREATE_DIR");//这句注释掉 $this->stateInfo $dirname;//换成这一句然后,进编辑器上传.会提示出一个错误的文件保存路径 双击复制下来这个路…...

Go 字符串处理

一、 字符串处理函数 我们从文件中将数据读取出来以后&#xff0c;很多情况下并不是直接将数据打印出来&#xff0c;而是要做相应的处理。例如&#xff1a;去掉空格等一些特殊的符号&#xff0c;对一些内容进行替换等。 这里就涉及到对一些字符串的处理。在对字符串进行处理时…...

家政服务接单小程序开发源码 家政保洁上门服务小程序源码 开源完整版

分享一个家政服务接单小程序开发源码&#xff0c;家政保洁上门服务小程序源码&#xff0c;一整套完整源码开源&#xff0c;可二开&#xff0c;含完整的前端后端和详细的安装部署教程&#xff0c;让你轻松搭建家政类的小程序。家政服务接单小程序开发源码为家政服务行业带来了诸…...

SuperMap iClient3D 11i (2023) SP1 for Cesium之移动实体对象

作者&#xff1a;nannan 目录 前言 一、代码思路 1.1 绘制面实体对象 1.2 鼠标左键按下事件 1.3 鼠标移动事件 1.4 鼠标左键抬起事件 二、运行效果 三、注意事项 前言 SuperMap 官网三维前端范例 编辑线面&#xff0c;可以对面实体对象的节点进行增加、删除以及修改位置…...

【深度学习 AIGC】stablediffusion-infinity 在无界限画布中输出绘画 Outpainting

代码&#xff1a;https://github.com/lkwq007/stablediffusion-infinity/tree/master 启动环境&#xff1a; git clone --recurse-submodules https://github.com/lkwq007/stablediffusion-infinity cd stablediffusion-infinity conda env create -f environment.yml conda …...

Flutter插件之阿里百川

上一篇&#xff1a;Flutter插件的制作和发布&#xff0c;我们已经了解了如何制作一个通用的双端插件&#xff0c;本篇就带领大家将阿里百川双端sdk制作成一个flutter插件供项目调用&#xff01; 目录 登录并打开控制台&#xff0c;创建应用&#xff1a;填写应用相关信息开通百川…...

✔ ★ 算法基础笔记(Acwing)(三)—— 搜索与图论(17道题)【java版本】

搜索与图论 1. DFS1. 排列数字(3分钟)2. n-皇后问题 2. BFS&#xff08;队列&#xff09;1. 走迷宫二刷总结&#xff08;队列存储一个节点pair<int,int>&#xff09;三刷总结 走过的点标记上距离(既可以记录距离&#xff0c;也可以判断是否走过) ★ ★ 例题2. 八数码二刷…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...