VUE详情弹窗查看

yu_zheng5163

已于 2024-04-22 15:12:53 修改

阅读量204

点赞数 2

文章标签：前端 javascript 开发语言

于 2024-04-07 09:29:19 首次发布

本文链接：https://blog.csdn.net/m0_56095048/article/details/137450019

版权

**第一步**
<template>
  <div class="app-container">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
      
    ** 第二步 加在最下面**
    
       <!-- 展示详情数据 需要进行更改 -->
       <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
        <el-table v-loading="loading" :data="questionRecordsDetailsList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="用户答案" align="center" prop="userAnswer" />
          <el-table-column label="问题" align="center" prop="questionA" />
          <el-table-column label="正确答案" align="center" prop="answerA" />
          <el-table-column label="解析" align="center" prop="explainA" />
          <el-table-column label="答题日期" align="center" prop="createTime" />
        </el-table>
      </el-dialog>
  </div>
</template>
**第三步**
   /** 查看详情操作 */
      handleDetail(row) {
      this.questionRecordsId = row.id
      console.log(row.id)
      this.queryParams.questionsRecordsId = row.id
      listQuestionRecordsDetail(this.queryParams).then(response => {
        this.questionRecordsDetailsList = response.rows;
        this.open = true;
        this.title = "查看详情";
      });
    },