誉天在线项目~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]		//回显数据
  }
1
2
3
4
5
6
7

vue表达式{{name}} 直接回显数据

el-form-item label="机构名称">
        {{form.data.companyName}}
      </el-form-item>
1
2
3

回显带 html的数据

如含有html标签

<el-form-item label="适用人群">
        <span v-html="form.data.users"></span>
      </el-form-item>
1
2
3

循环展示数组中的值

      <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>
1
2
3
4
5
6
7
8
9
10
11

根据编号展示名称

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

// 课程等级204
let gradeOptions = ref([])
GetDict(204)
    .then(res=>{
      gradeOptions = res
    })
    .catch(err=>{
      console.log(err)
    })
1
2
3
4
5
6
7
8
9

利于数组的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>
1
2
3
4
5
6
7
8
9
10
11
12

回显图片

        <el-form-item label="课程封面">
          <img :src="`../../upload/${form.data.pic}`" width="500">
        </el-form-item>
1
2
3