导出excel

<template>
  <section class="container">
    <el-button @click="exportExcel">导出</el-button>
    <oce-export-dialog
      :visible.sync="showDialog"
      @confirm="exportConfirm"
      :isCheck="isCheck"
      :isOverload="isOverload"
      overloadText="单次导出最多导出1万条数据"></oce-export-dialog>
  </section>
</template>

<script>
export default {
  name: 'sheetExport',
  data() {
    return {
      tableColumn: [
        {
          label: '列1',
          prop: 'column1',
          search: true,
          expand: true,
        },
        {
          label: '列2',
          prop: 'column2',
        },
        {
          label: '列3',
          prop: 'column3',
        },
        {
          label: '列4',
          prop: 'column4',
        },
      ],
      tableData: [
        {
          column1: '1-1',
          column2: '1-2',
          column3: '1-3',
          column4: '1-4',
          id: 1,
          parentId: null,
          hasChild: true,
        },
        {
          column1: '2-1',
          column2: '2-2',
          column3: '2-3',
          column4: '2-4',
          id: 2,
          parentId: null,
        },
        {
          column1: '3-1',
          column2: '3-2',
          column3: '3-3',
          column4: '3-4',
          id: 3,
          parentId: null,
          hasChild: 1,
        },
        {
          column1: '4-1',
          column2: '4-2',
          column3: '4-3',
          column4: '4-4',
          id: 4,
          parentId: null,
        },
        {
          column1: '5-1',
          column2: '5-2',
          column3: '5-3',
          column4: '5-4',
          id: 5,
          parentId: null,
        },
        {
          column1: '6-1',
          column2: '6-2',
          column3: '6-3',
          column4: '6-4',
          id: 6,
          parentId: null,
        },
        {
          column1: '7-1',
          column2: '7-2',
          column3: '7-3',
          column4: '7-4',
          id: 7,
          parentId: null,
        },
        {
          column1: '8-1',
          column2: '8-2',
          column3: '8-3',
          column4: '8-4',
          id: 8,
          parentId: null,
        },
        {
          column1: '9-1',
          column2: '9-2',
          column3: '9-3',
          column4: '9-4',
          id: 9,
          parentId: null,
        },
      ],
      tableOption: {
        title: '导出文件名称前缀',
      },
      showDialog: false,
      isCheck: true, // 是否有选中项目
      isOverload: false, // 是否超载
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    // 导出按钮回调
    exportExcel() {
      console.log('导出按钮回调')
      this.showDialog = true
    },
    // 导出弹窗回调
    exportConfirm(e) {
      this.crudLoading = true
      try {
        switch (e.dataField) {
          case 1:
            console.log('选中导出勾选数据')
            break
          case 2:
            console.log('选中导出所有数据')
            break
          case 3:
            console.log('选中导出当前页数据')
            break
          case 4:
            console.log('选中导出指定页数据', e.assignPage)
            break
          default:
            break
        }
        this.$ocean.exportXlsx({
          data: { sheet1: this.tableData, sheet2: this.tableData },
          option: this.tableOption,
          column: { sheet1: this.tableColumn, sheet2: this.tableColumn },
          sheetOpt: {
            sheet1: {
              name: 'sheet1',
            },
            sheet2: {
              name: 'sheet2',
            },
          },
        })
      } catch (err) {
        console.log(err)
      } finally {
        this.crudLoading = false
      }
    },
  },
  created() {},
  mounted() {},
}
</script>

<style scoped lang="scss"></style>

Expand Copy Copy