vue 弹框分左右两部分
<div class="dialog_diy" >
<el-dialog :visible.sync="otherShow" :close-on-click-modal='true' width="40%" height="80%">
<div slot="title" class="header-title">
<div style="border: 1px solid rgb(15, 15, 15);border-width: 0 0 2px 0;font-size: 24xp;font-weight: bold;color: #f9f9fa;">
{{zyzzName}}
</div>
</div>
<div class="htmlBody" style="color: #F9F9FA;height:90%;">
<el-row :gutter="20">
<el-col :span="11">
<el-table height="360" :data="otherTableData" highlight-current-row @row-click="changeImage" >
<el-table-column prop="orgId" type="index" label="序号"/>
<el-table-column prop="orgName" width="260px" label="公司名称"/>
<el-table-column prop="certifiCount" label="数量"/>
</el-table>
</el-col>
<el-col :span="13">
<el-carousel height="360" :interval="4000" type="card" indicator-position="none">
<el-carousel-item v-for="(item,index) in pictureOptions" :key="index">
<el-image
style="width: 100%; height: 100%"
:zIndex="9999"
:src="item"
:preview-src-list="pictureOptions"
/>
</el-carousel-item>
</el-carousel>
</el-col>
</el-row>
</div>
</el-dialog>
</div>
点击图片弹框信息
selectDetail(name){ const param= new FormData(); this.pictureOptions=[] this.zyzzName=name if(name == '专利'){ if(this.GROUP_PATENT_CODE > 0){ param.append("certifiType", this.$publicjs.certifi_code.patent); } }else if(name == '著作权'){ if(this.GROUP_COPYRIGHT_CODE > 0){ param.append("certifiType", this.$publicjs.certifi_code.copyright); } }else if(name == '资质'){ if(this.GROUP_QUALIFICATIONS_CODE > 0){ param.append("certifiType", this.$publicjs.certifi_code.qualifications); } } selectDetail(param).then((res) => { if (res.code == 200) { this.otherTableData = res.data.list this.otherTableData.forEach(td=>{ this.orgOption.forEach( allOrg=>{ if(td.orgId == allOrg.orgId){ td.orgName =allOrg.orgName } }) }) // 图片处理 res.data.reportCertificateInfos.forEach(r=>{ let img = this.$publicjs.qualificationPicture + r.filePath this.pictureOptions.push(img); }) this.$nextTick(()=>{ this.otherShow=true }) } }); },
浙公网安备 33010602011771号