vue和element-ui配合导出table表格

最新推荐文章于 2023-02-24 11:25:00 发布

qrn1024

最新推荐文章于 2023-02-24 11:25:00 发布

阅读量440

点赞数 2

本文链接：https://blog.csdn.net/jingruoannan/article/details/103462821

版权

1 安装两个依赖

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

2 在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor')

3 在src下新建一个文件夹vendor，引入两个文件Blob.js 和 Export2Excel.js （https://gitee.com/quruonan/vender.git）

4 vue文件里写入该方法

// 导出表格
    exportClick () {
      let obj = {
        searchField: this.reqParams.query,
        status: this.status === '0' ? '' : this.status,
        startTime: this.startDate,
        endTime: this.endDate,
        pageFlag: 0
      }
      api.getList(obj, res => {
        this.exportList = res.data
        this.export2Excel()
      }, err => {
        console.log(err)
      })
    },
    export2Excel () {
      require.ensure([], () => {
        const { exportJsonToExcel } = require('../../../vendor/Export2Excel')
        // 对应表格输出的title
        const tHeader = ['订单号', '收货人', '手机号', '收货地址', '会员名', '下单人手机号', '上级用户', '上级用户手机号', '商品名称', '总数量', '总金额', '实付金额', '订单状态', '支付方式', '下单时间']
        // 对应表格输出的数据
        const filterVal = ['orderNo', 'name', 'mobile', 'address', 'userName', 'userMobile', 'inviterName', 'inviterMobile', 'goodsName', 'quantity', 'orderAmount', 'paymentAmount', 'status', 'payment', 'ctime']
        const list = this.exportList
        list.forEach(el => {
          el['payment'] = el['payment'] === 0 ? (el['paymentText'] = '待付款') : (el['payment'] === 1 ? (el['paymentText'] = '微信支付') : (el['payment'] === 2 ? (el['paymentText'] = '支付宝') : el['paymentText'] = '抵用券'))
          el.ctime = util.formatDate(el.ctime)
          el.status = el.status === 1 ? (el.status = '待付款') : (el.status === 2 ? '待发货': (el.status === 3 ? '待收货': (el.status === 4 ? '已收货' : '已取消')))
        })
        const data = this.formatJson(filterVal, list)
        // 对应下载文件的名字
        exportJsonToExcel(tHeader, data, '订单列表')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }

5 点击按钮 <el-button @click="exportClick">导出</el-button> 调用exportClick方法