java实习-vue表格弹窗功能

hbw0226

已于 2023-04-30 10:50:51 修改

阅读量308

点赞数 1

分类专栏： vue 文章标签： vue.js java javascript

于 2023-03-30 10:12:04 首次发布

本文链接：https://blog.csdn.net/hbw0226/article/details/129851151

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一. 准备步骤

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

<template>
      <el-table
        <el-table-column prop="" show-overflow-tooltip label="">
1          <template slot-scope="scope">
            <el-link
              type="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-dialog
      title=""
      :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-button
              type="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.certInfo
          let certRegistration = data.levelProtectManager.certRegistration
          let gradingReport = data.levelProtectManager.gradingReport
          let evalReport = data.levelProtectManager.evalReport
          this.dataList.push({
            certInfo,
            certRegistration,
            gradingReport,
            evalReport
          });
          this.loading = false;      
      });
    },
    handleClose(){
      this.dataList = []
    },
    //附件下载
    downloadEvt(url) {
      window.open(url, "_self");
    },    
    
}
}
</script>