首页 > 其他分享 >vue 弹框分左右两部分

vue 弹框分左右两部分

时间:2023-06-28 16:44:32浏览次数:33  
标签:弹框分 code 左右两 name res publicjs param vue CODE

<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
          })
        }
      });
    },

 

标签:弹框分,code,左右两,name,res,publicjs,param,vue,CODE
From: https://www.cnblogs.com/flyShare/p/17511810.html

相关文章

  • Vue.js 渲染函数和 JSX
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • vue-element table表格排序推拽功能
    //1.安装sortablejsnpminstallsortablejs--save//2.功能页面中引入importSortablefrom‘sortablejs’具体使用(注意:elementtable务必指定row-key,且row-key必须是唯一的,如id,不然会出现排序不对的情况)<el-tablerow-key="id":data="tableData"style="width:......
  • 2023.6.28 - vue项目打包内存堆栈溢出JS stacktrace
    vue项目打包时报错,JSstacktrace:ReachedheaplimitAllocationfailed-JavaScriptheapoutofmemory这是因为node打包时是有内存空间限制的,node能分配多少空间,默认是根据电脑内存占比来算的。在内存比较小的电脑里,默认分配给node的内存可能不足以支撑起项目运行或者打包......
  • vue3+vite+js配置路径别名
    1、让vscode认识@符号项目下新建jsconfig.json,配置baseUrl,paths参数{"compilerOptions":{"target":"esnext","useDefineForClassFields":true,"module":"esnext","moduleResolution&q......
  • VUE http大文件断点续传上传
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率。 本文是基于springboot+vue实现的文件上传,本文主要介绍服务端实现文件......
  • vue中watch侦听器,deep和immediate的用法
    1、deep深度监听的用法当监听一个对象时,可能想监听整个对象的变化,而不仅仅是某个属性。但在默认情况下,如果你正在监听formData对象并且修改了formData.username,对应的侦听器并不会触发,它只在formData对象被整个替换时触发。监听整个对象被称作深度监听,通过将deep选项设置为true......
  • 深入剖析:Vue核心之虚拟DOM
    前言使用Vue做项目也有两年时间了,对Vue的api也用的比较得心应手了,虽然对Vue的一些实现原理也耳有所闻,例如虚拟DOM、flow、数据驱动、路由原理等等,但是自己并没有特意去探究这些原理的基础以及Vue源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行Vue框架相......
  • vue定时器
    exportdefault{methods:{fun1(){consttimer=setInterval(()=>{//需要做的事情},1000);//通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy',()=>{clearInterval(timer);......
  • VUE框架组件中通信方式(4)
    ref-children-parentref方法既可以获取真实的DOM节点,还可以获取到子组件的实例VC,$parent可以在子组件中获取父组件的实例VC,使用方式是在子组件的方法中传入的参数只能是$parent如:<button@click="handler($parent)">点击我爸爸给我10000元</button>示例代码如下;//父组件代码<......
  • 前端Vue自定义手机号文本格式化组件手机号码文本转星号
    前端Vue自定义手机号文本格式化组件,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13231效果图如下:cc-format-phone使用方法<!--phone:手机号isStar:是否转星号--><cc-format-phone:phone="":isStar="false"></cc-format-phone>......