vue+element ui table导出勾选、全部数据

一：第一种方式

1 安装依赖

npm install --save xlsx file-saver

id写在里面，才能够导出数据

// 下面的方法中也有注释
id="out-table"

绑定事件

      <el-form-item>
        <el-button @click="exportExcel">导出</el-button>
      </el-form-item>

引入组件

  // // 引入导出Excel表格依赖
  // import FileSaver from 'file-saver'
  // import XLSX from 'xlsx'

写方法

exportExcel () {
		//  如果有固定列，导出的数据会重复，所以要过滤掉
        let fix = document.querySelector('.el-table__fixed-right')
        let wb
        if (fix) { // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        // 这是个id选择器，我们在需要导出的表格上面加上id就行
          wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
          document.querySelector('#out-table').appendChild(fix)
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        }
        /* 获取二进制字符串作为输出 */
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        try {
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          // Blob 表示的不一定是JavaScript原生格式的数据。
          // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '抄表功能.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },

二 使用vue-json-excel插件

1 安装插件

npm install vue-json-excel --save

在main.js页面中注册组件

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

然后回到我们要导出数据的界面

<template>
	<download-excel
       class = "export-excel-wrapper"
       // 这个json_data就是后端返回过来的json数据
       :data = "dataFindList "
       // 导出勾选的数据，两个data不能同时存在
       :data="dataListSelections"
       // 这是你的模板格式，也是json格式的，定义表头
       :fields = "json_fields"
       name = "文件名字.xls">
       <el-button type="primary" size="small" style="right: 30px;position: absolute;">导出EXCEL</el-	button>
     </download-excel>
</template>

<script>
  export default {
		data () {
      return {
        multipleSelection: [],
        json_fields: {
          '序号': 'id',
          '医院名称': 'hospitalName',
          '贮存点地址': 'address',
          '数量': 'number',
          '申报时间': 'declareTime',
          '备注': 'remark',
          '操作状态': 'statu'
        },
        dataForm: {
          hospitalName: ''
        },
        dataList: [],
        dataFindList: [],
        pageIndex: 1,
        pageSize: 5,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
      this.getFindDataList()
    },
    methods: {
      getFindDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('接口'),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataFindList = data.page
            console.log(this.dataFindList)
          } else {
            this.dataFindList = []
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      }
 	}
</script>