浏览按钮
点击浏览按钮,传递列表数据索引值。
根据索引值从列表数据数组中获取当前行数据。
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>