【Dropdown 下拉菜单二级菜单】el-dropdown 做二级菜单下载文件

最新推荐文章于 2024-03-27 08:00:00 发布

偷坚果的松鼠

最新推荐文章于 2024-03-27 08:00:00 发布

阅读量1.2k

点赞数

分类专栏： vue 下拉框样式文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/yanjun3/article/details/128127189

版权

vue 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

下拉框样式

1 篇文章 0 订阅

订阅专栏

 <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdited(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="text" @click="handleCopy(scope.row)"
              >复制</el-button
            >
            <!-- <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              >下载报告</el-button
            > -->
            <span @click="handleOpen(scope.$index, scope.row)">
              <el-dropdown class="fr" trigger="click">
                <span class="el-dropdown-link">
                  报告<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item>
                    <span class="icon-span">选项</span>
                  </el-dropdown-item> -->
                  <el-dropdown-item>
                    <el-dropdown
                      placement="right-start"
                      class="personalization"
                      trigger="hover"
                    >
                      <span class="el-dropdown-link personalization"
                        >整机对比表
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="item in menuList"
                          :key="item.value"
                          :index="item.key + '/' + item.value"
                          @click.native="changeSkin(item)"
                          >{{ item.key }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <el-button
              size="mini"
              type="text"
              @click="handleYaml(scope.$index, scope.row)"
              >任务详情</el-button
            >

            <!-- <el-button
              size="mini"
              type="text"
              @click="handleFile(scope.$index, scope.row)"
              >报告</el-button
            > -->
          </template>
        </el-table-column>

 // 报告下载
    changeSkin(val) {
      const params = {
        jobId: this.jobId,
        code: val.value
      };
      getExportJobReport(params).then(res => {
        if (res.status === 200) {
          this.downloadCallback(res, `${val.key}.xlsx`);
        }
      });
    },
    // 生成下载文件
    downloadCallback(res, fileName) {
      const content = res.data;
      const blob = new Blob([content]);
      if ("download" in document.createElement("a")) {
        // 非IE下载
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName);
      }
    },
    // 获取报告下拉数据
    handleOpen(index, row) {
      this.jobId = row.id;
      getJobReportTypeSelect().then(res => {
        if (res.status === 200) {
          this.menuList = res.resultObj;
        }
      });
    },