点击查看按钮，弹出一个悬浮框并且要让悬浮框里的表格内容要请求一下数据？

Question

从一个悬浮框传id到另一个悬浮框，如下图。
1、这个是页面，点击查看，弹出一个悬浮框

2、就是这个

问题： 我要最后这一个悬浮框里的数据是单独的，就是说，我从页面的多个数据里点击查看，而那个悬浮框里数据是不一样的。现在我所完成的就是，从页面的那些数据点击查看，而那个悬浮框里数据全部是一样的。

附上代码：

<template>
<div>

<div class="fill">
  <el-button type="primary" @click="fillin2()" style="margin-left: 85%"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增数据</el-button>
</div>
<el-table :data="tableData" v-loading="loading" border>
  <el-table-column prop="real_name" label="姓名" align="center"></el-table-column>
  <el-table-column label="类型" align="center">
    <template slot-scope="scope">
      {{enumIsCorp[scope.row.is_corp]}}
    </template>
  </el-table-column>
  <el-table-column label="性别" align="center">
    <template slot-scope="scope">
      {{enumSex[scope.row.sex]}}
    </template>
  </el-table-column>


 
  <el-table-column label="家庭状况" align="center">
    <template slot-scope="scope">
      {{enumMarriageStatus[scope.row.marriage_status]}}
    </template>
  </el-table-column>

  <el-table-column prop="" label="附件" align="center"></el-table-column>
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <button type="primary" class="btn-farm-more" @click="fillin(scope.row)"><span>查看</span></button>
    </template>
  </el-table-column>
</el-table>
<div class="query-pagination">
  <el-pagination class="pull-right"
                 @current-change="getData"
                 :current-page.sync="params.index"
                 :page-size="params.size"
                 layout="total, prev, pager, next, jumper"
                 :total="tableTotal">
  </el-pagination>
</div>
<el-dialog width="88%" :visible.sync="fillVisible" :before-close="handleClose">
  <div class="fill">
  
    <div class="fill">
      <el-form :inline="true" :model="form" ref="form" class="tabtop13" :rules="rules">
        <el-form-item label="人员类型">
          <el-select v-model="form.is_corp" :clearable="true">
            <el-option key="1" label="3" value="0"></el-option>
            <el-option key="2" label="2" value="1"></el-option>
            <el-option key="3" label="1" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" class="fill">
          <el-input placeholder="请填写" v-model="form.real_name" :disabled="form.is_corp === '1'"></el-input>
        </el-form-item>
        <el-form-item label="性别" class="fill">
          <el-select v-model="form.sex">
            <el-option key="1" label="男" value="1"></el-option>
            <el-option key="2" label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="联系电话" class="fill">
          <el-input placeholder="请填写" v-model="form.mobile_no"></el-input>
        </el-form-item>
        <el-form-item label="居住地址" class="fill">
          <select-address v-model="form.address_code"></select-address>
        </el-form-item>
        <el-form-item class="fill">
          <el-input placeholder="请填写" v-model="form.address_detail"></el-input>
        </el-form-item>
      
      
      
        <el-form-item label="学历" prop="education">
          <el-select v-model="form.education">
            <el-option key="1" label="小学" value="0"></el-option>
            <el-option key="2" label="初中" value="1"></el-option>
            <el-option key="3" label="高中" value="2"></el-option>
            <el-option key="4" label="中专" value="3"></el-option>
            <el-option key="5" label="大专" value="4"></el-option>
            <el-option key="6" label="本科" value="5"></el-option>
            <el-option key="7" label="硕士研究生" value="6"></el-option>
            <el-option key="8" label="博士研究生" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭状况" style="width: 25%" prop="marriage_status">
          <el-select style="width: 110%;" v-model="form.marriage_status">
            <el-option key="1" label="已婚(被政府评为五好家庭、文明户，或被金融机构评为“信用农户”等类似荣誉的)" value="1"></el-option>
            <el-option key="2" label="已婚(有子女)" value="2"></el-option>
            <el-option key="3" label="已婚(无子女)" value="3"></el-option>
            <el-option key="4" label="离异" value="4"></el-option>
            <el-option key="5" label="未婚" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配偶姓名">
          <el-input placeholder="请填写" v-model="form.spouse_real_name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.spouse_sex">
            <el-option key="1" label="男" value="1"></el-option>
            <el-option key="2" label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
    
     
      
      </el-form>
    </div>

    <div v-loading="edloading">
      <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
        <tr align="center">
          <td :rowspan="educationalData.length+1" width="120px">受教育经历</td>
          <td>起止时间</td>
          <td>年龄阶段</td>
          <td>教育机构</td>
          <td>专业</td>
          <td>备注</td>
          <td>操作</td>
        </tr>
        <tr align="center" v-for="(p, index) of educationalData">
          <td align="center"><el-input v-model="p.start_end_date"></el-input></td>
          <td><el-input v-model="p.age_inter"></el-input></td>
          <td><el-input-number  :min="0" :controls="false" style="width: 110px" v-model="p.education_mech"></el-input-number></td>
          <td><el-input-number  :min="0" :controls="false" style="width: 110px" v-model="p.profession"></el-input-number></td>
          <td><el-input v-model="p.remark"></el-input></td>
          <td width="60px" align="center" v-if="!edAdd">
            <el-button type="text" title="删除"
                       @click="handleRemove(p.id)"><i class="fa fa-times"></i></el-button>
          </td>
          <td width="60px" align="center" v-else>
            <el-button type="text" title="删除"
                       @click="Remove(index, educationalData)"><i class="fa fa-times"></i></el-button>
          </td>
        </tr>
        <tr v-if="edAdd">
          <td colspan="7" align="center"><el-button @click="educationalData.push({})">新增一行</el-button></td>
        </tr>
      </table>
      <div class="fill">
        <el-row type="flex" class="row-bg" justify="left">
          <el-col :span="4"><el-button @click="educationalNew">新增数据</el-button></el-col>
          <el-col :span="6"><el-button @click="getData">取消</el-button></el-col>
          <el-button style="margin-left: 20%" @click="educationalsubmit" :loading="edpostloading">保存</el-button>
        </el-row>
      </div>
    </div>

    <div class="fill" v-loading="staaloading">
      <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
        <tr align="center">
          <td :rowspan="staffData.length+1" width="120px">工作经历</td>
          <td>起止时间</td>
          <td>年龄阶段</td>
          <td>工作单位</td>
          <td>职务</td>
          <td>资产累积</td>
          <td>大额开支</td>
          <td>操作</td>
        </tr>
        <tr align="center" v-for="(p, index) of staffData">
          <td><el-input v-model="p.start_end_date"></el-input></td>
          <td><el-input v-model="p.age_inter"></el-input></td>
          <td><el-input-number  :min="0" :controls="false" style="width: 110px" v-model="p.work_unit"></el-input-number></td>
          <td><el-input-number  :min="0" :controls="false" style="width: 110px" v-model="p.job"></el-input-number></td>
          <td><el-input v-model="p.assets_total"></el-input></td>
          <td><el-input v-model="p.large_exp"></el-input></td>
          <td width="60px" align="center" v-if="!staAdd">
            <el-button type="text" title="删除"
                       @click="whandleRemove(p.id)"><i class="fa fa-times"></i></el-button>
          </td>
          <td width="60px" align="center" v-else>
            <el-button type="text" title="删除"
                       @click="Removew(index, staffData)"><i class="fa fa-times"></i></el-button>
          </td>
        </tr>
        <tr v-if="staAdd">
          <td colspan="8" align="center"><el-button @click="staffData.push({})">新增一行</el-button></td>
        </tr>
      </table>
      <div class="fill">
        <el-row type="flex" class="row-bg" justify="left">
          <el-col :span="4"><el-button @click="workNew ">新增数据</el-button></el-col>
          <el-col :span="6"><el-button @click="getData">取消</el-button></el-col>
          <el-button style="margin-left: 20%" @click="onsubmitt" :loading="sdpostloading">保存</el-button>
        </el-row>
      </div>
    </div>

  
  </div>
  <div class="fill">
    <el-button @click=" handleClose" style="margin-left: 20%">取消</el-button>
    <el-button style="margin-left: 10%" @click="onsubmit" :loading="postloading">保存</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>
import {getCustomerShareholder, getHandEducation, getWorkExp, postCustomerShareholder, putCustomerShareholder,

postWorkExp, postHandEducation, putWorkExp, putHandEducation, deleteHandEducation, deleteWorkExp} from '@/api/credit'

import {enumIsCorp, enumMarriageStatus, enumSex, enumEducation} from '@/utils/enum'
import SelectAddress from '@/components/SelectAddress2'
export default {

components: {

  SelectAddress
},

props: {},

data() {
  return {
    enumIsCorp,
    enumMarriageStatus,
    enumSex,
    enumEducation,
    params: {
      index: 1,
      size: 10
    },
    tableData: [],
    detaill: {},
    educationalData: [{}, {}],
    staffData: [{}, {}],
    postloading: false,
    sdpostloading: false,
    edpostloading: false,
    edloading: false,
    staaloading: false,
    edAdd: false,
    staAdd: false,
    form: {},
    tableTotal: 0,
    loading: false,
    staffloading: false,
    fillVisible: false,
    isput: false,

  }
},
computed: {

},
watch: {},

created() {
  this.init()
  this.getData()
},

mounted() {
},

methods: {
  init() {
    this.detaill = JSON.parse(localStorage.getItem('detail'))
  },
  educationalNew() {
    this.edAdd = true
  },
  workNew() {
    this.staAdd = true
  },
  getData() {
    this.loading = true
    this.edloading = true
    this.staaloading = true
    this.edAdd = false
    this.staAdd = false
    this.tableData = []
    this.educationalData = []
    this.staffData = []
    getCustomerShareholder({
      index: this.params.index,
      size: this.params.size,
      service_id: this.detaill.service_id,
      customer_id: this.detaill.customer_id
    }, {customer_id: 'eq', service_id: 'eq'}, {is_corp: 'desc'}).then(res => {
      if (res.data) {
        this.tableData = res.data.data
        this.tableTotal = res.data.totalCount
      }
    }).catch(err => {
      console.log(err)
    }).then(() => {
      this.loading = false
    })
    getHandEducation({
      customer_id: this.detaill.customer_id,
      id: this.form.datum_customer_shareholder_id
    }, {customer_id: 'eq', id: 'eq'}, {}).then(res => {
      if (res.data) {
        for (let item of res.data) {
          if (item.is_corp === '0') {
            this.educationalData.push(item)
          } else if (item.is_corp === '1') {
            this.educationalData.push(item)
          } else {
            this.educationalData.push(item)
          }
        }
        // this.educationalData = res.data
      }
    }).catch(err => {
      console.log(err)
    }).then(() => {
      this.edloading = false
    })
    getWorkExp({
      customer_id: this.detaill.customer_id,
      id: this.form.datum_customer_shareholder_id
    }, {customer_id: 'eq', id: 'eq'}, {}).then(res => {
      if (res.data) {
        this.staffData = res.data
      }
    }).catch(err => {
      console.log(err)
    }).then(() => {
      this.staaloading = false
    })
  },


  handleClose() {
    this.form = {}
    this.idcardFileList = []
    this.marriagestatusFileList = []
    this.positioimagesFileList = []
    this.honorimagesFileList = []
    this.accountbookimagesFileList = []
    this.fillVisible = false
    this.$refs.form.clearValidate()
  },
  fillin(val) {
    this.fillVisible = true
    this.isput = true
    this.edAdd = false
    this.staAdd = false
    this.form = {...val}
    this.photoinit()
  },
  fillin2() {
    this.fillVisible = true
    this.educationalData = [{}, {}]
    this.staffData = [{}, {}]
  },


  
 


  onsubmit() {
    this.$refs.form.validate(valid => {
      if (valid) {
        this.postloading = true
        this.$refs.idcard.submit()
      } else {
        this.$message.error('出现错误，请检查！')
      }
    })
  },
  educationalsubmit() {
    this.edpostloading = true
    if (this.educationalData.length < 1) { return this.$message.warning('请完善数据！') }
    for (let t = 0; t < this.educationalData.length; t++) {
      this.educationalData[t].customer_id = this.detaill.customer_id
      this.educationalData[t].customer_name = this.detaill.farm_name
      this.educationalData[t].customer_related_id = this.detaill.customer_related_id
      this.educationalData[t].id = this.form.datum_customer_shareholder_id
    }
    if (this.edAdd) {
      postHandEducation(this.educationalData).then(res => {
        if (res.data) {
          this.$message.success('新增信息成功！')
          this.getData()
        } else {
          this.$message.error('新增信息失败，请重试！')
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('新增信息失败，请重试！')
      }).then(() => {
        this.edpostloading = false
      })
    } else {
      putHandEducation(this.educationalData[0].id, this.educationalData[0]).then(res => {
        if (res.data) {
          this.$message.success('修改信息成功！')
          this.fillin()
          this.getData()
        } else {
          this.$message.error('修改失败，请重试！')
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('修改信息失败，请重试！')
      }).then(() => {
        this.edpostloading = false
      })
    }
  },
  onsubmitt() {
    this.sdpostloading = true
    if (this.staffData.length < 1) { return this.$message.warning('请完善数据！') }
    for (let t = 0; t < this.staffData.length; t++) {
      this.staffData[t].customer_id = this.detaill.customer_id
      this.staffData[t].customer_name = this.detaill.farm_name
      this.staffData[t].customer_related_id = this.detaill.customer_related_id
      this.staffData[t].id = this.form.datum_customer_shareholder_id
    }
    if (this.staAdd) {
      postWorkExp(this.staffData).then(res => {
        if (res.data) {
          this.$message.success('新增信息成功！')
          this.getData()
        } else {
          this.$message.error('新增信息失败，请重试！')
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('新增信息失败，请重试！')
      }).then(() => {
        this.sdpostloading = false
      })
    } else {
      putWorkExp(this.staffData[0].id, this.staffData[0]).then(res => {
        if (res.data) {
          this.$message.success('修改信息成功！')
          this.fillin()
          this.getData()
        } else {
          this.$message.error('修改失败，请重试！')
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('修改信息失败，请重试！')
      }).then(() => {
        this.sdpostloading = false
      })
    }
  },
  handleRemove(id) {
    deleteHandEducation(id).then(res => {
      if (res.data) {
        this.$message.success('删除信息成功！')
        // this.getData()
        this.handleClose()
      }
    }).catch(err => {
      console.log(err)
      this.$message.error('删除信息失败，请重试！')
    })
  },
  whandleRemove(id) {
    deleteWorkExp(id).then(res => {
      if (res.data) {
        this.$message.success('删除信息成功！')
        this.handleClose()
        this.getData()
      }
    }).catch(err => {
      console.log(err)
      this.$message.error('删除信息失败，请重试！')
    })
  },
  Removew(index, data) {
    data.splice(index, 1)
  },
  Remove(index, data) {
    data.splice(index, 1)
  }
}

}
</script>

<style scoped>
.fill {

border: 1px solid #ebeef5;

}

.tabtop13 {

margin-top: 15px;

}
.tabtop13 td {

background-color:#ffffff;
height:25px;
line-height:150%;

}
.biaoti {

font-family: 微软雅黑;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed #CCCCCC;
color: #255e95;

}
</style>

现在最主要的问题是教育和工作这一块，所有显示的数据都是一样的，为什么？

Answer 1

那你点击查看的时候就要把数据保存下来啊，再传导第3里面的表格里面啊