前端Excel组件Jexcel.js（结合antd）

项目有个需求，就是做一份月度考核的报表。报表是以Excel的形式展示的，有那种合并单元格的，然后大佬给我找了一个组件：Jexcel，让我看着文档去把表格设计出来。
文档的地址为：Jexcel文档
文档都是英文的，有很多属性都比较分散，我把我用到的总结一下（在网上搜有关的博文，发现较少介绍到）
先展示做出来的效果：
在这里插入图片描述
以下是结合了vue的代码：

<template >
  <a-card :bordered="false">
    <div>
      <div class="table-operator">
        <a-select style="width:150px">
          <a-select-option :key="index" :value="index">{
   
   { index }}</a-select-option>
        </a-select>
        <a-select style="width:150px;margin-left:10px">
          <a-select-option :key="index" :value="index">{
   
   { index }}</a-select-option>
        </a-select>
        <a-button style="margin-left:10px" @click="handleCompare()" type="primary" icon="plus">数据比较</a-button>
      </div>
      <div style="margin-left:10px" id="app" ref="spreadsheet"></div>
    </div>
  </a-card>
</template>
<script>
import jexcel from 'jexcel'
import 'jexcel/dist/jexcel.css'
var data = [
  ['民警考核绩效考核报表', '', '', '', '', '', '', '', '', '', '', '', ''],
  ['单位及部门', '', '考核内容及分值(总分100)', '', '', '', '', '', '', '', '', '', '备注'],
  [
    '部门',
    '姓名',
    '共性考核(18%)/默认100分(满分100)',
    '',
    '',
    '岗位绩效考核(39%)/默认80分(满分100分)',
    '',
    '',
    '专项绩效考核(3%)/满分(5)',
    '领导考核(40%)/(满分100分)',
    '考核成绩',
    '考核等次',
    ''
  ],
  ['', '', '普通扣分', '否决指标', '合计', '加分', '扣分', '合计', '', '', '', '', '']
]
var options = {
  data: data,
  allowToolbar: true,
  colWidths: [100, 100, 130, 130, 130, 130, 130, 130, 200, 230, 130, 130, 200],
  columns: [
    // { type: 'text', title: '民警考核绩效考核报表', width: '120px' },
    // { type: 'text', title: '姓名', width: '2150px', source: ['Alfa Romeo', 'Audi', 'Bmw'] },
    // { type: 'text', title: '普通扣分', width: '2150px' },
    // { type: 'text', title: '否决指标', width: '120px' },
    // { type: 'text', title: '合计', width: '80px' },
    // { type: 'numeric', title: '加分', width: '150px', mask: '$ #.##,00', decimal: ',' },
    // { type: 'text', title: '扣分', width: '120px' },
    // { type: 'text', title: '合计', width: '120px' }
  ],

  //   nestedHeaders: [
  //     [
  //       {
  //         title: '民警考核绩效考核报表',
  //         colspan: '7'
  //       }
  //     ],
  //     [
  //       {
  //         title: 'Location',
  //         colspan: '5'
  //       },
  //       {
  //         title: ' Other Information',
  //         colspan: '2'
  //       }
  //     ]
  //   ]
  mergeCells: {
    A1: [13, 1], //合并单元格，第一个数字是合并列，第二个数字是合并行
    A2: [2, 1],
    C2: [10, 1],
    M2: [1, 3],
    A3: [1, 2],
    B3: [1, 2],
    C3: [3, 1],
    F3: [3, 1],
    I3: [1, 2],
    J3: [1, 2],
    K3: [1, 2],
    L3: [1, 2]
  },
  minDimensions: [10, 40]
}
export default {
  name: 'App',
  mounted: function() {
    let spreadsheet = jexcel(this.$el, options)
    Object.assign(this, { spreadsheet })
  }
}
</script>
<style >
</style>

以下主要概述一下我用到的属性：

data：Excel的表格数据
colWidths：每一个单元格的宽度
columns：为表头的名字（刚开始想用这个来做表头，可是发现不能满足我合并单元格的需求，就放弃了）小茹
nestedHeaders：是合并表头的操作，title是表格的名字，colspan是横跨多少列
mergeCells：进行合并单元格的操作，A1: [13, 1]是指在A1的数据合并了13列，一行；M2: [1, 3]是指M2的数据合并了1列，3行
minDimensions：是指给表格指定多少行多少列

如果有用到前端Excel的组件，这个jexcel还是挺强大的，应该还有很多功能没有被挖掘，待我细细去挖掘

前端Excel组件Jexcel.js（结合antd）

猜你喜欢