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

浏览按钮

点击浏览按钮,传递列表数据索引值。

根据索引值从列表数据数组中获取当前行数据。

java 复制代码
<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}} 直接回显数据

java 复制代码
el-form-item label="机构名称">
        {{form.data.companyName}}
      </el-form-item>

回显带 html的数据

如含有html标签

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

循环展示数组中的值

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

根据编号展示名称

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

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

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

java 复制代码
<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>

回显图片

java 复制代码
        <el-form-item label="课程封面">
          <img :src="`../../upload/${form.data.pic}`" width="500">
        </el-form-item>
相关推荐
爱编程的喵几秒前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib2 分钟前
Flutter
开发语言·javascript·flutter
想躺平的咸鱼干38 分钟前
Volatile解决指令重排和单例模式
java·开发语言·单例模式·线程·并发编程
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
Owen_Q1 小时前
Denso Create Programming Contest 2025(AtCoder Beginner Contest 413)
开发语言·算法·职场和发展
·云扬·1 小时前
【Java源码阅读系列37】深度解读Java BufferedReader 源码
java·开发语言
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
liulilittle2 小时前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业