elementui + vue 弹窗实现 el-table 当前行记录的详细数据展示

页面展示的表格数据，点击ID会弹出当前记录的信息(如果页面数据信息很多，看着会很不直观，可以做一个弹窗把需要的数据都展示在弹窗里面)

// 这是表格获取的ID
<af-table-column
        prop="id"
        label="ID"
        align="center"
        >  
        <template slot-scope="scope">    
        									//scope.row  会获取当前ID行记录 
              <el-button type="text" @click="viewInfo(scope.row)" >{{scope.row.id}}</el-button>
         </template>
      </af-table-column>

		
	// 弹窗
	<el-dialog :title="dialogTitle" :visible.sync="dialogVisible1" width="50%" :close-on-click-modal="false"  >
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="BaseInfos" name="first">
      <el-form :model='ticketInfoform'>
        <el-form-item label="Title"  >    
          <el-input v-model="ticketInfoform.issue_title" ></el-input>                     
                          </el-form-item>

            <el-form-item label="ID"  >    
          <el-input v-model="ticketInfoform.id"  ></el-input>                     
                          </el-form-item>

          <el-form-item label="Status"  >    
          <el-input v-model="ticketInfoform.status"  ></el-input>                     
                          </el-form-item>
                          
          <el-form-item label="Assignee"  >    
          <el-input v-model="ticketInfoform.assigned_to_username"  ></el-input>                     
                          </el-form-item>

          <el-form-item label="Submitted_Time"  >    
          <el-input v-model="ticketInfoform.submitted_time"  ></el-input>                     
                          </el-form-item>
          
          <el-form-item label="Type"  >    
          <el-input v-model="ticketInfoform.ticket_type"  ></el-input>                     
                          </el-form-item>

          <el-form-item label="Submitter"   >    
          <el-input v-model="ticketInfoform.submitter_username"  ></el-input>                     
                          </el-form-item>
      </el-form>

    </el-tab-pane>
    <el-tab-pane label="Comment History" name="second">配置管理</el-tab-pane>
    
  </el-tabs>
 
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" >确 定</el-button>
 
</el-dialog>


	<script>
		export default {
		  data() {
		    return {
					//该对象和后端获取的数据key相对应
				ticketInfoform:{
				        issue_title:'',
				        id:'',
				        Status:'',
				        Assignee:'',
				        Submitted_Time:'',
				        Type:'',
				        Submitter:'',

      },
		    }
		    }
			methods: {
				    // 点击ID 查看数据明细
				    viewInfo(row){
				      this.dialogTitle = 'BaseInfos Or History';
				      this.dialogVisible1 = true;
				      this.ticketInfoform = row

						//深拷贝方式一,逐个赋值 这种比较麻烦，代码冗余了解即可
						this.ticketInfoform.issue_title = row.issue_title
					    this.ticketInfoform.id = row.id
					    this.ticketInfoform.Status = row.Status
					    this.ticketInfoform.Assignee = row.Assignee
					    this.ticketInfoform.Submitted_Time = row.Submitted_Time
					    this.ticketInfoform.Type = row.Type
					    this.ticketInfoform.Submitter = row.Submitter

						//深拷贝方式二   (推荐)
						this.ticketInfoform = JSON.parse(JSON.stringify(row))
						
				    },
			
		    }

效果图

当然这个弹窗数据展示的格式还可以调整一下，这里仅记录一下大致的实现方式

但是这样会存在一个问题，这里修改ID的时候会连同页面上的ID一并修改，这显然是不符合逻辑的。因为在methods里面定义的方法，把row直接赋值给ticketInfoform，用的是浅拷贝它们的指针是指向同一个对象的，说白了就是操作的是同一个对象。所有要解决这个问题这里需要用深拷贝，把之前的数据完完全全的复制一份，是我们当前行的数据和之前的是两份，这样改变表单的数据才不会影响页面的表格。其他数据也一样