当前位置: 首页 > 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>
http://www.lryc.cn/news/166711.html

相关文章:

  • 神经网络-pytorch版本
  • uniapp vue 页面传参问题encodeURIComponent
  • 【GDAL】tif影像拼接和目标截取
  • ARM核心时间线
  • 【Redis】深入探索 Redis 的数据类型 —— 列表 List
  • 高精度乘除法(超详细)
  • List 获取前N条数据
  • Spring入门控制反转(或依赖注入)AOP的关键概念 多配置文件与web集成
  • 排序算法-希尔排序
  • ClientDataSet运行中出现“ClientDataSet:dataset not in edit or insert mode”(一)
  • 华为GaussDB数据库
  • Flink、Spark、Hive集成Hudi
  • 百度编辑器 Ueditor 视频上传时 目录创建失败 解决办法
  • Go 字符串处理
  • 家政服务接单小程序开发源码 家政保洁上门服务小程序源码 开源完整版
  • SuperMap iClient3D 11i (2023) SP1 for Cesium之移动实体对象
  • 【深度学习 AIGC】stablediffusion-infinity 在无界限画布中输出绘画 Outpainting
  • Flutter插件之阿里百川
  • ✔ ★ 算法基础笔记(Acwing)(三)—— 搜索与图论(17道题)【java版本】
  • 初试占比70%,计算机招生近200人,安徽理工大学考情分析
  • LeetCode题解:1720. 解码异或后的数组,异或,JavaScript,详细注释
  • 【C刷题】day2
  • Apollo源码安装的问题及解决方法
  • Flutter 挖孔屏的状态栏占用问题怎么解决,横屏后去掉了状态栏,还是会有一块黑色的竖条
  • Layui快速入门之第九节 表格事件的使用
  • [2023.09.14]: Rust的条件编译
  • 数据清洗:数据挖掘的前期准备工作
  • 基于FPGA的图像sobel锐化实现,包括tb测试文件和MATLAB辅助验证
  • HDMI 直通 ILA 调试实验
  • 基于Qt4开发曲线绘制交互软件Plotter