element-UI 渲染動態的 prop 和 label 以及導出動態的數據為excel

注：要想導出execl，首先要先按照模塊化工具，我這點就懶得寫了，點擊鏈接看這篇文章：https://www.cnblogs.com/tlfe/p/12858991.html

描述：突然接到一個需求，就是在輸入框填寫數據庫查詢語句，然后去數據庫拿到想要的數據，在這個情況下：每次查詢出來的字段和字段名都不一樣，怎么把它對應的顯示在el-table上呢，而且還要要導出為表格數據。

1、實際上查詢出來的數據是非常的多的，這點我只顯示幾條數據，作為演示，可以看到總的數據為 2.7萬條，我們只渲染10條在頁面上，（此處注意，不能把所有的數據一次性渲染在頁面上）當然不怕卡死的可以試試

 

 

2、上面這個圖只是最終的演示圖，下面看html部分的寫法（注意標紅的部分）

<el-table id="table" :data="execlData" border :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}">
     <el-table-column v-for="item in tableData" :prop="item" :label="item" :key="item.id" width="160" show-overflow-tooltip align="center"></el-table-column>
</el-table>

 

2-1、我們打印出execlData和tableData的數據，如下圖所示

 

3、data部分代碼

data() {
    return {
      form: {
        creatorName: "" //搜索條件
      },
      tableData:[], //只裝表格標題，見上面的圖
      execlData: [], //裝的是要渲染顯示出來的10條數據
      exportData: [], //點擊導出的時候，拿到所有的數據放在這里面
    };
  },

4、js部分

methods: {
    request() {
      let obj = {
        userId: Number(sessionStorage.getItem("userId")),
        sessionId: sessionStorage.getItem("sessionId"),
        sql: this.form.creatorName //數據庫查詢語句
      };
      this.$axios.post("/admin/sql/sql", obj).then(res => {
        if (res.errorCode == 200) {
          let array = res.result;
          this.tableData = []; //裝的是渲染th用的數據就是 label屬性
          this.execlData = [];  //就是渲染在頁面上的10條數據
          array.forEach((element, index) => {
              if(index<1){
                //   lable
                for (var key in element) {
                    this.tableData.push(key)
                }
              }
              
              if(index < 10){
                this.execlData.push(element)
              }
          });
          console.log(this.tableData,'this.tableData')
          console.log('--------------------------------------------------------')
          console.log(this.execlData,'this.execlData')
        }else{
          loot.Messages(this,'error','數據查詢失敗！')
        }
      });
    },
    
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    // 點擊導出的函數
    exportExcel() {
        this.$axios.post('/admin/sql/sql',{
            userId: Number(sessionStorage.getItem("userId")),
            sessionId: sessionStorage.getItem("sessionId"),
            sql: this.form.creatorName
        }).then(res => {
            if(res.errorCode === 200){
                this.exportData = []; //初始化裝所有數據的容器
                let array = res.result
                array.forEach(element => {
                    this.exportData.push(element) //把所有數據放到容器里面
                });
                // 導出數據
                require.ensure([], () => {
                    const { export_json_to_excel } = require('@/vendor/Export2Excel');

                    // 這兩行代碼是正常示例，只是我們這點由於每次查詢的數據是變化的，所以需要改動
                    // const tHeader = ['標題', '投稿人', '展示終端', '標簽分類',];
                    // const filterVal = ['title', 'nickName', 'show_Terminal', 'tagName'];
                    
                    // 我這點都用this.tableData的原因是，我表格label和對應的prop屬性都是一樣的。見上面這兩行代碼
                    const tHeader = this.tableData;  //相當於你table中的label屬性
                    const filterVal = this.tableData; //相當於你table中的prop
                    // 上面的id、Name、name是age里對象的屬性
                    const list = this.exportData;  //把一次次拿到的數據放到list里面
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, 'excel');
                })
            }else{
              loot.Messages(this,'error','導出失敗！')
            }
        })
    },

    //點擊查詢的按鈕 
    seek() {
      this.request();
    }
  }