• el-table中的数据选择导出


    在项目中可能会遇到甲方要求,表格中的数据要能够导出成xlx文件,方便传阅。

    我使用的是el-table组件和axios

    关键代码是在el-table中加

    <el-table-column
          type="selection"     //type='selection'很关键
     width="55"> </el-table-column> 
    

    <el-button type="success"   :disabled="multiple" @click="handleExport">导出</el-button>
    <el-table
                :data="tableData"           
                style="100%;"
               
     @selection-change="handleSelectionChange"
            ref="table"
              >
    //el-table中要有下面两行代码
    
     @selection-change="handleSelectionChange"
            ref="table"

    需要在data中定义的属性

    selectionData: null, // 表格被选中的数据
          // 非多个禁用
          multiple: true,
          ids: [],

    axios记得下载并引入,下面是关键js代码

     handleSelectionChange(data) {
          this.selectionData = data;
          this.ids = data.map((item) => item.id);
          this.multiple = !data.length;
        },
        handleExport() {
          let ids = [];
          const arr = [];
          this.selectionData.map((item) => {
            arr.push(item.id);
          });
          ids = arr.join(",");
    
          axios({
            methods: "get",
            url:
              process.env.VUE_APP_BASE_API +
              "/ccapi/yjxx/exportSydYjxxList?ids=" +
              ids,
            responseType: "blob",
          }).then((res) => {
            let url = window.URL.createObjectURL(res.data);
            //    var fileType = "application/vnd.ms-excel;charset=utf-8";
            // var fileType1 =
            //   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
            // let url = window.URL.createObjectURL(//因为传了responseType:blob参数返回的数据已经是blob样式的,所以不用new Blob转化了
            //   new Blob([res.data], {
            //     type: fileType,
            //   })
            // );
            this.downloadFile(url, "随便一个名字.xls");
          });
        },
        downloadFile(data, fileName) {
          if (!data) {
            return;
          }
    
          // const url = window.URL.createObjectURL(new Blob([res.data]));
          // const blob=new Blob([data])
          // const url= URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = data;
          link.setAttribute("download", fileName);
          document.body.append(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(data);
          this.ids = [];
        },
  • 相关阅读:
    $.ajax({}) 方法 参数
    JS原生ajax函数写法
    jQuery Ajax封装通用类
    200 300 400 500各代表的服务器状态码
    MySQL添加用户、删除用户与授权
    mysql事务回滚
    javascript 基础知识(部分对象和js dom操作)
    GC垃圾回收机制
    Java基础篇
    数据库中事务的ACID特性
  • 原文地址:https://www.cnblogs.com/shanchui/p/15524746.html
Copyright © 2020-2023  润新知