Fk-table NPM | npm.io

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 属性

npm.io

    <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

npm.io

      <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

npm.io

       <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>