项目有个需求,就是做一份月度考核的报表。报表是以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>

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

  1. data:Excel的表格数据

  2. colWidths:每一个单元格的宽度

  3. columns:为表头的名字(刚开始想用这个来做表头,可是发现不能满足我合并单元格的需求,就放弃了)小茹在这里插入图片描述

  4. nestedHeaders:是合并表头的操作,title是表格的名字,colspan是横跨多少列

  5. mergeCells:进行合并单元格的操作,A1: [13, 1]是指在A1的数据合并了13列,一行;M2: [1, 3]是指M2的数据合并了1列,3行

  6. minDimensions:是指给表格指定多少行多少列

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

Logo

前往低代码交流专区

更多推荐