誉天在线项目~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>
相关推荐
贵沫末6 分钟前
React——基础
前端·react.js·前端框架
ejinxian7 分钟前
PHP 超文本预处理器 发布 8.5 版本
开发语言·php
aklry17 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9324 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子25 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982425 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug28 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo28 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
软件黑马王子33 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon34 分钟前
C#读写文件:多种方式详解
开发语言·数据库·c#