誉天在线项目~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>