一. 准备步骤

1.在主组件页面加入slot-scop标签

<template><el-table<el-table-column prop="" show-overflow-tooltip label="">
1          <template slot-scope="scope"><el-linktype="primary":underline="false"@click="numberDetail(scope.row.id)">{{scope.row.hasRank}}</el-link></template>         </el-table-column></el-table><SystemNumberTable ref="SystemNumberTable"></SystemNumberTable>
</template>

2.写对应的方法调用子组件

<script>
import SystemNumberTable from "./SystemNumberTable";
export default {components: {//需要调用的子组件SystemNumberTable},methods:{numberDetail(id){//子组件的引用this.$refs.SystemNumberTable.refreshList(id);     },}}
</script>

3.在对应的组件写出你想要的弹窗表格

<template><div><el-dialogtitle="":close-on-click-modal="false"v-dialogDrag:visible.sync="visible"@close="handleClose"><el-table:data="dataList"size="medium"v-loading="loading"class="table"><el-table-column show-overflow-tooltip label=""><template slot-scope="scope"><el-buttontype="text"size="small"@click="downloadEvt(scope.row.certInfo)">附件</el-button></template></el-table-column></el-table></el-dialog></div>
</template>
<script>data() {return {dataList: [],};},refreshList(id) {this.loading = true;this.visible = true;this.id=id;this.$http({url: ''method: "get",}).then(({ data }) => {let certInfo = data.levelProtectManager.certInfolet certRegistration = data.levelProtectManager.certRegistrationlet gradingReport = data.levelProtectManager.gradingReportlet evalReport = data.levelProtectManager.evalReportthis.dataList.push({certInfo,certRegistration,gradingReport,evalReport});this.loading = false;      });},handleClose(){this.dataList = []},//附件下载downloadEvt(url) {window.open(url, "_self");},    }
}
</script>

java实习-vue表格弹窗功能相关推荐

Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
java导出表功能_表格导出功能实践
表格导出分为静态导出与动态导出. 静态导出是将当前已经渲染的表格项导出为指定的格式,可为.xls或.cvs.这种导出无需后端支撑,完全由前端实现. 动态导出是通过将参数传与后端接口,该接口负责生成Bl ...
Java项目:前后端分离疫情防疫平台设计和实现(java+springmvc+VUE+node.js+mybatis+mysql+springboot+redis+jsp)
源码获取:博客首页 "资源" 里下载! 主要技术:Java.springmvc.VUE.node.js.mybatis.mysql.tomcat.jquery.layui.boot ...
java实习报告范文
篇1:java实习报告范文一.前言实习时间:20_年02月07号---20_年06月1号实习地点:河北中信联信息技术有限公司软件开发实习生实习目的:通过实习,培养学生树立理论联系实际的工作作 ...
Java小记-Vue/ElementUI/Axios(超级无敌认真好用，万字收藏篇!!!!)
文章目录 Vue/ElementUI/Axios 前言 1 Vue简介 2 Vue的安装 3 Vue的简单使用 4 Vue的指令 4.1 什么是Vue的指令 4.2 Vue常用指令 5 Element ...
优秀java实习报告范文5篇
优秀java实习报告范文(一) 一:实习介绍 1)实习题目学生信息管理系统的设计与开发 2)实习目的 <Java程序设计>课程是电子商务专业的一门专业必修课程,特针对此课程进行为期三 ...
JAVA 实习面试题大全必看
JAVA 实习面试题大全必看 JavaSE 88 基础语法 9 Q1:简单说说Java有哪些数据类型答:①分为基本数据类型和引用数据类型.②基本数据类型包括:数值型(byte.short.int.l ...
开源Vue表格组件，表格插件源码
开源Vue表格组件,表格插件源码前言: 关于html里面原生的table,通常满足不了程序员的要求.所以开发了一款表格插件,其功能有: 1 导入json格式数据后,自动填充表格.表格长宽自适应.排 ...

java实习-vue表格弹窗功能

一. 准备步骤

1.在主组件页面加入slot-scop标签

2.写对应的方法调用子组件

3.在对应的组件写出你想要的弹窗表格

java实习-vue表格弹窗功能相关推荐

最新文章

热门文章

java实习-vue表格弹窗功能

一. 准备步骤

1.在主组件页面 加入slot-scop标签

2.写对应的方法调用子组件

3.在对应的组件写出你想要的弹窗表格

java实习-vue表格弹窗功能相关推荐

最新文章

热门文章

1.在主组件页面加入slot-scop标签