封装Vue可选择列导出表格组件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、创建ExportExcel.vue组件" title="vue组件">vue组件

<template>
 <div class="export_tools">
  <div v-show="false">
   <el-table id="out-table" style="width: 100%;" :data="exportTable">
    <template v-for="(item, index) in exportTitle">
     <el-table-column
      v-if="item.isExport"
      :prop="item.prop"
      :label="item.label"
      align="center"
      :key="index"
     >
      <template slot-scope="scope">
       <span>{{ scope.row[item.prop] ? scope.row[item.prop] : \'-\' }}</span>
      </template>
     </el-table-column>
    </template>
   </el-table>
  </div>
  <el-button v-if="showExportBtn" type="primary" v-debounce="export_data" icon="el-icon-download">导出表格</el-button>
 </div>
</template>
<script>
/**
 * 组件功能：可选择列导出表格。
 * 组件说明：需要从父组件中传入四个值，如下
 *  1、exportTable：需要导出的表格数据；
 *  2、exportTitle：表格中有哪些列是可以导出的；格式如下(isExport为true则导出此列，false则不导出此列)：
 *          [
 *              {
 *                  prop:\'对应的字段1\',
 *                  label:\'列名1\',
 *                  isExport: true
 *              },
 *              {
 *                  prop:\'对应的字段2\',
 *                  label:\'列名2\',
 *                  isExport: false
 *              }
 *          ]
 *  3、excelName：导出的文件名，最后导出后文件的格式为：年-月-日 时_分_秒-excelName.xlsx,
 *  如 excelName 为 ‘通道数据表格’，则最后导出的文件名是：2022-01-14 10_40_52-通道数据表格.xlsx
 *  4、showExportBtn：是否显示 “导出表格” 按钮，默认显示，如不显示的话可以通过ref的方式直接调用 export_data 方法来导出表格。
 */
import FileSaver from \'file-saver\'
import XLSX from \'xlsx\'
export default {
 name: \'ExportExcel\',
 props: {
  exportTable: {
   type: Array,
   required: true,
   default: [],
  },
  exportTitle: {
   type: Array,
   required: true,
   default: [],
  },
  excelName: {
   type: String,
   required: true,
   default: \'Data\',
  },
  showExportBtn: {
   type: Boolean,
   required: false,
   default: true,
  },
 },
 data() {
  return {}
 },
 methods: {
  // 导出 excel 表格
  export_data() {
   if (this.exportTable.length == 0) return this.$message.warning(\'表格为空，无法导出...\')
   // 为el-table添加一个id：out-table
   let wb = XLSX.utils.table_to_book(document.querySelector(\'#out-table\'))
   let wbout = XLSX.write(wb, {
    bookType: \'xlsx\', // 导出的文件类型
    bookSST: true,
    type: \'array\',
   })
   try {
    FileSaver.saveAs(
     new Blob([wbout], { type: \'application/octet-stream\' }),
     `${this.$dayjs().format(\'YYYY-MM-DD HH_mm_ss\')}-${this.excelName}.xlsx`
    )
    setTimeout(() => {
     return this.$message.success(\'表格导出成功...\')
    }, 1000)
   } catch (e) {
    if (typeof console !== \'undefined\') console.log(e, wbout)
   }
   return wbout
  },
 },
 mounted() {},
}
</script>
<style lang="scss" scoped></style>

2、在父组件中引入

import ExportExcel from \'../commonTools/ExportExcel.vue\' // 导出表格组件

3、在components中注册组件

 components: {
  \'export-excel\': ExportExcel,
 },

4、在template中使用组件

<export-excel
     :exportTable="tableData"
     :excelName="excel_name"
     :exportTitle="export_title"
    ></export-excel>

注意：需要安装依赖

npm install --save xlsx file-saver

以上是 封装Vue可选择列导出表格组件 的全部内容， 来源链接： utcz.com/z/377205.html

回到顶部