FK-Table

基于element-ui的table组件，针对公司复杂的表格合并，统计的问题。不需要后端另行拼接，解决后端接口不能复用的问题

Install

npm install fk-table -S

yarn add fk-table

Quick Start

import Vue from 'vue'
import FKTable from 'fk-table'

Vue.use(FKTable)

Description

原来element-ui表格属性都继承支持，合并表格用到的属性如下

| 参数 | 说明 | 类型 |可选值 | 默认 | |:---------------:|----------------|:----------------:|:----------------:|:----------------:| |auto-merge | 列是否用于分组合并 | boolean | | | |merge-banner | 是否用于分组合并头部行 | boolean | | | |summary | 分组是否需要开启统计行 |boolean/string| inner-tailouter-tailinner-headouter-head | | |show-summary | 本列是否需要统计 | string | | | |summary-text | 统计行的文本参数 | string | - | 合计 | |summary-colspan | 统计行跨行数 | number | | 0 | |flow-center | 悬浮居中，解决过长的合并问题这个会给当前列的td、cell加上class分别是flow-center、cell-flow-center 有特殊需求可以换成别的，但是不会再自动帮计算悬浮居中| string | | flow-center |

Examples

普通分组

auto-merge 属性

    <fk-table
      :data="tableMock()"
      style="width: 100%">
      <fk-table-column
        prop="dormitoryName"
        auto-merge
        label="楼栋">
      </fk-table-column>
      <fk-table-column
        prop="storeyName"
        auto-merge
        label="楼层">
      </fk-table-column>
      <fk-table-column
        prop="roomNo"
        auto-merge
        label="房号">
      </fk-table-column>
      <fk-table-column
        prop="useCategory"
        auto-merge
        label="用途类别"/>
      <fk-table-column
        prop="empName"
        label="员工姓名">
      </fk-table-column>
      <fk-table-column
        prop="sex"
        label="性别">
      </fk-table-column>
      <fk-table-column
        prop="empCategory"
        label="员工类别">
      </fk-table-column>
    </fk-table>

横幅分组

merge-banner 属性 banner 行的class为table-banner

      <fk-table
      :data="tableMock()"
      style="width: 100%">
      <fk-table-column
        prop="dormitoryName"
        auto-merge
        merge-banner
        label="楼栋">
      </fk-table-column>
      <fk-table-column
        prop="storeyName"
        auto-merge
        label="楼层">
      </fk-table-column>
      <fk-table-column
        prop="roomNo"
        auto-merge
        label="房号">
      </fk-table-column>
      <fk-table-column
        prop="useCategory"
        auto-merge
        label="用途类别"/>
      <fk-table-column
        prop="empName"
        label="员工姓名">
      </fk-table-column>
      <fk-table-column
        prop="sex"
        label="性别">
      </fk-table-column>
      <fk-table-column
        prop="empCategory"
        label="员工类别">
      </fk-table-column>
    </fk-table>

分组统计

在要统计的组上加上属性

分组行 tr的 class 为 table-counter__row 统计文字行 td的 class 为 table-column__summary

另：分组序号列是 <fk-table-column label="序号" prop="__index" min-width="10%"></fk-table-column>

prop填__index 需要分组的列加上index-group属性，如果不加默认用顶级分组序号

<fk-table-column label="周" auto-merge prop="recordWeek" index-group min-width="15%">

summary="inner-tail"
summary-text="大计"

横向合并属性：summary-colspan

       <fk-table
            :data="tableMock()"
            :border="true"
            style=" width: 100%">
      <fk-table-column
              prop="dormitoryName"
              auto-merge
              merge-banner
              label="楼栋">
      </fk-table-column>
      <fk-table-column
              prop="storeyName"
              auto-merge
              label="楼层">
      </fk-table-column>
      <fk-table-column
              prop="roomNo"
              auto-merge
              label="房号">
      </fk-table-column>
      <fk-table-column
              prop="useCategory"
              auto-merge
              summary="outer-tail"
              summary-text="小计"
              :summary-colspan=1
              label="用途类别"/>
      <fk-table-column
              prop="empName"
              label="员工姓名">
      </fk-table-column>
      <fk-table-column
              prop="sex"
              show-summary
              label="性别">
      </fk-table-column>
      <fk-table-column
              prop="position"
              label="岗位">
      </fk-table-column>
    </fk-table>
    <div></div>
    <fk-table
            :data="tableMock()"
            :border="true"
            style="width: 100%">
      <fk-table-column
              prop="dormitoryName"
              auto-merge
              merge-banner
              label="楼栋">
      </fk-table-column>
      <fk-table-column
              prop="storeyName"
              auto-merge
              label="楼层">
      </fk-table-column>
      <fk-table-column
              prop="roomNo"
              auto-merge
              label="房号">
      </fk-table-column>
      <fk-table-column
              prop="useCategory"
              auto-merge
              summary="inner-tail"
              summary-text="大计"
              :summary-colspan="0"
              label="用途类别"/>
      <fk-table-column
              prop="empName"
              label="员工姓名">
      </fk-table-column>
      <fk-table-column
              prop="sex"
              show-summary
              label="性别">
      </fk-table-column>
      <fk-table-column
              prop="position"
              label="岗位">
      </fk-table-column>
    </fk-table>

TODO

• [x] 分组序号的问题
• [x] banner行，合计行样式
• [ ] 合计行的字样在哪一列
• [ ] groupby 应该支持function去切分分组
• [ ] 统计行加上自定义文字，例如：统计出来是数字，后面加上单位（人）、（度/天）等
• [ ] 分组支持多个层级，
• [ ] 单元测试
• [ ] 统计精度，目前写死是2
• [ ] 容错检测，比如没有autoMeger的时候不应该有统计行的概念
• [x] 长合并单元格悬浮居中