前端实现vue element ui 勾选的表格数据导出

安装依赖

npm install --save xlsx file-saver
npm install -D script-loader

在src文件夹中新建文件夹（命名为excel）

新建文件夹后，在utils文件夹内新建两个js文件，分别命名为Blob.js、export2Excel.js，

在相关文件内的method方法中，写入如下代码

ExportExcel.vue子组件

<template>
    <el-button type="primary"  :loading="downloadLoading"   @click="downloadExcel">导&nbsp;&nbsp;出</el-button>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import Blob from '@/utils/Blob.js'
import Export2Excel from '@/utils/Export2Excel.js'
export default {
  props: {
    id: {
      type: String,  //table ID名称
      default: 'table'
    },
    name: {
      type: String, //导出需要的名字
      default: 'Table'
    },
    multipleSelection:{
       type: Array, //导出需要的数据
      default: 'Table'
    }

  },
  data () {
    return {
      downloadLoading:false
    }
  },
  components: {},
  methods: {
    // 数据写入excel
    export2Excel () {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/utils/Export2Excel'); // 这里必须使用绝对路径，使用@/+存放export2Excel的路径
        const tHeader = ['序号', '设备号', '通道号','接收时间','采集时间','原始值1','原始值2','计算值1','计算值2','电压']; // 导出的表头名信息
        const filterVal = ['index', 'deviceid', 'chnum','measureTime','measureTime','sdata1','sdata2','rdata1','rdata2','voltage']; // 导出的表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, '导出Table');// 导出的表格名称，根据需要自己命名
      });
    },
    // 格式转换，直接复制即可
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
     downloadExcel () {
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.multipleSelection; // multipleSelection是一个数组，存储表格中选择的行的数据。
        if(this.excelData.length !== 0) {
        this.export2Excel();
        }else{
           this.$message({
          message: '请选择至少一条数据进行操作！',
          type: 'warning'
        })
        }
        
      }).catch(() => {

      });
    },
  }
}
</script>

父组件

 <el-table
          row-key="ownerUserid"
          id="exportTab"
          class="driver-list-main"
          ref="multipleTable"
          border
          :data="userList"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266',
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column  label="序号" sortable width="75">
            <template slot-scope="scope" prop="ownerUserid">
              <span v-text="getIndex(scope.$index)"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceid" label="设备号" sortable width="165">
          </el-table-column>
          <el-table-column prop="chnum" label="通道号" sortable width="85">
          </el-table-column>
          <el-table-column
            prop="collectTime"
            label="接收时间"
            show-overflow-tooltip
            sortable
            width="165"
          >
          </el-table-column>
          <el-table-column
            prop="measureTime"
            label="采集时间"
            show-overflow-tooltip
            sortable
            width="165"
          >
          </el-table-column>
          <el-table-column
            prop="sdata1"
            label="原始值1"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="sdata2"
            label="原始值2"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="rdata1"
            label="计算值1"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="rdata2"
            label="计算值2"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="voltage"
            label="电压"
            show-overflow-tooltip
            sortable
          >
          </el-table-column>
          <el-table-column label="操作" width="70">
            <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <el-button
                  style="z-index: 99"
                  @click="deleteItem(scope)"
                  type="danger"
                  size="medium"
                  icon="el-icon-delete"
                  class="del"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
<el-col :xs="3" :sm="3" :lg="3" class="flex-align-center1">
                <exportExcel
                  :id="'exportTab'"
                  :name="'导出Table'"
                  :multipleSelection="multipleSelection"
                ></exportExcel>
              </el-col>

handleSelectionChange(val) {
      this.multipleSelection = val;
    },