el-table动态列,固定左侧 点击导出表格

效果:

 

 

 

<div class="dot_box">
                <div class="dot"></div>
                <span>SA项目成交数合计</span>
                <div class="right_btn"><a href="#" @click="downloadTable('dataList','SA项目成交数合计')">导出表格</a></div>
            </div>
            <div class="data_box">
                <el-table
                        id="dataList"
                        ref="table"
                        :data="dataList2"
                        :header-cell-style="getHeaderStyleNone"
                        :cell-style="setRowStyleColorNone"
                        :cell-class-name="cellClassName"
                        @cell-click="selectData"
                        show-summary
                        :summary-method="getSummaries"
                        style="overflow-x: scroll">
                    <el-table-column
                            v-for="(item, index) in dataList2[0]"
                            :key="item.id"
                            :prop="index"
                            :fixed="index.replace(/[^0-9]/ig,'')*1 === 0 ? 'left' : false "
                    >
                        <template slot-scope="scope" v-if="index.indexOf('td') != -1">
                            <a href="#">{{scope.row[index]}}</a>
                        </template>

                    </el-table-column>
                </el-table>
            </div>

重点： 不能用 display:none  否则页面会卡死

getHeaderStyleNone() {
        return "opacity: 0;";
},

setRowStyleColorNone(row, column, rowIndex, columnIndex) {
  // console.log("选中行",this.row)
  // console.log("循环行",row)
  var row_Index = this.row.index
  var column_Index = this.column.index

  if (column_Index && column_Index == row.columnIndex) {
    if (row_Index && row_Index == row.rowIndex) { // 列
      return 'background: #ebecee; color: red;fontSize:20px'
    }
    return 'background: #ebecee; color:#000'
  } else if (row_Index && row_Index == row.rowIndex) {
    if (column_Index && column_Index == row.columnIndex) {
      return 'background: #ebecee; color: red'
    }
    return 'background: #ebecee; color:#000'
  } else {
    return 'background: #fff; color: #0D0E12'
  }


},

cellClassName({ row, column, rowIndex, columnIndex }) {
  row.index = rowIndex;
  column.index = columnIndex;
},

getSummaries(param) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    if (column.property == "index") {
      sums[index] = '';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
    } else {
      sums[index] = 'N/A';
    }
  });

  return sums;
},

数据封装格式如下：

 

 

querySADealFeedback(params){
        net.request("url", "post", null, params).then(res => {
          if (res.code == 0) {
            let data = res.data

            if (data) {
              data[0][data[0].length - 1] = "合计"
            }

            let labelArr = []
            let dataList = []
            for (let i = 0; i < data[0].length; i++) {
              labelArr.push('td' + i)
            }
            for (let i = 0; i < data.length - 2; i++) {
              let list = {}
              for (let j = 0; j < data[i].length; j++) {
                let label = 'td' + j
                let dataStr = data[i][j]
                list[label] = dataStr
              }
              dataList.push(list)
            }
            console.log(dataList)
            this.dataList2 = dataList
            this.$nextTick(() => {
              this.$refs['table2'].doLayout();
            })

          } else {
            net.message(this, "获取数据失败", "warning");
          }
        })
      },

 

导出数据

downloadTable(elTableId, name){
        let tables = document.getElementById(elTableId).cloneNode(true) // 重点
        tables.removeChild(tables.querySelector(".el-table__fixed")) // 重点
        let table_book = XLSX.utils.table_to_book(tables)
        var table_write = XLSX.write(table_book, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array',
        })
        try {
          FileSaver.saveAs(
            new Blob([table_write], { type: 'application/octet-stream' }),
            name+".xlsx"
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, table_write)
        }
        return table_write
      },