导出excel

<template>
  <div class="container">
    <div>
      <oce-crud
        v-loading="crudLoading"
        :data="tableData"
        :column="tableColumn"
        :option="tableOption"
        @export-excel="exportExcel"
      >
      </oce-crud>
      <oce-export-dialog
          :visible.sync="showDialog"
          @confirm="exportConfirm"
          :isCheck="isCheck"
          :isOverload="isOverload"
          overloadText="单次导出最多导出1万条数据"
        ></oce-export-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CrudExportDemo',
  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: '导出文件名称前缀',
        exportBtn: true,
        searchMenuSpan: 6,
        formDialog: {
          show: true,
        },
      },
      crudLoading: false,
      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: this.tableData, option: this.tableOption, column: this.tableColumn,
        })
      } catch (err) {
        console.log(err)
      } finally {
        this.crudLoading = false
      }
    },
  },
  created() {},
  mounted() {},
}
</script>

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

Expand Copy Copy