新加坡vps东莞seo整站优化
浏览按钮
点击浏览按钮,传递列表数据索引值。
根据索引值从列表数据数组中获取当前行数据。
<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>