jimi-table

v0.1.2

Published

3 years ago

## 背景

Downloads

0High
0Medium
0Low

makerlzz

j-table

背景

提供一个前端表格业务组件，在新项目需要使用到表格时能快速集成，无需重复封装，节约开发成本，提升开发效率。该组件将根据现有平台中心各个web项目95%表格类型进行具象化。组件实现后，各个web项目需要使用可以自行使用也可自行封装，多样处理，无需严格适配，目的是提升开发效率，怎样更快更高质量完成需求为前提是本组件实现的初衷。

以现有项目框架将采用 vue2+element 项目逐渐使用vue3时考虑翻译为vue3+elementplus方式

组件具象

组件结构由头、中、尾三部分组成，表格和分页器全部使用透传方式继承Element Table 和 Pagination 组件属性和方法

组件头部

即顶部操作栏区域，可配置显示和隐藏，分为左右区域，水平方向支持居左、居右、两端对齐方式，垂直方向支持顶端、底部、居中对齐

头部左边由一个插槽组成 headLeft

头部右边由插槽 headRight 和筛选列头控件组成（可以不开启动态表头功能）

筛选列头（动态表头）

使用默认控件，可配置图标路径、图标大小、图标颜色将使用 <i></i>元素进行承载

列头配置缓存功能，可控制是否开启缓存

组件中部

即表格区域，布局采用三种方式，第一种完全撑开至父组件提供的高度，第二种存在多少行显示多少行，在达到父组件提供高度时内部表格产生滚动条，第三种传入固定高度，表格固定高度

表格内部数据完全采用接收父组件传入方式

列元素支持 render自定义列元素

组件尾部

即分页区域，可配置显示和不显示，布局方式与头部一致均可配置，可根据具体情况配置默认配置

具有插槽 pageSlot 在layout属性中设置slot位置即可（可适配国外总条数描述类说明）

框图

参数配置

Attributes

透传 Table 表格

|参数|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |data|显示的数据|Array|—|—| |height|Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 String 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式|String/number|—|—| |max-height|Table 的最大高度。合法的值为数字或者单位为 px 的高度。|String/number|—|—| |stripe|是否为斑马纹 table|Boolean|—|false| |border|是否带有纵向边框|Boolean|—|false| |size|Table 的尺寸|String|medium / small / mini|—| |fit|列的宽度是否自撑开|Boolean|—|true| |show-header|是否显示表头|Boolean|—|true| |highlight-current-row|是否要高亮当前行|Boolean|—|false| |current-row-key|当前行的 key，只写属性|String,Number|—|—| |row-class-name|行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。|Function({row, rowIndex})/String|—|—| |row-style|行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。|Function({row, rowIndex})/Object|—|—| |cell-class-name|单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。|Function({row, column, rowIndex, columnIndex})/String|—|—| |cell-style|单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。|Function({row, column, rowIndex, columnIndex})/Object|—|—| |header-row-class-name|表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。|Function({row, rowIndex})/String|—|—| |header-row-style|表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。|Function({row, rowIndex})/Object|—|—| |header-cell-class-name|表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。|Function({row, column, rowIndex, columnIndex})/String|—|—| |header-cell-style|表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。|Function({row, column, rowIndex, columnIndex})/Object|—|—| |row-key|行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。|Function(row)/String|—|—| |empty-text|空数据时显示的文本内容，也可以通过 slot="empty" 设置|String|—|暂无数据| |default-expand-all|是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效|Boolean|—|false| |expand-row-keys|可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。|Array|—|—| |default-sort|默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序|Object|order: ascending, descending|如果只指定了prop, 没有指定order, 则默认顺序是ascending| |tooltip-effect|tooltip effect 属性|String|dark/light|—| |show-summary|是否在表尾显示合计行|Boolean|—|false| |sum-text|合计行第一列的文本|String|—|合计| |summary-method|自定义的合计计算方法|Function({ columns, data })|—|—| |span-method|合并行或列的计算方法|Function({ row, column, rowIndex, columnIndex })|—|—| |select-on-indeterminate|在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行|Boolean|—|true| |indent|展示树形数据时，树节点的缩进|Number|—|16| |lazy|是否懒加载子节点数据|Boolean|—|—| |load|加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息|Function(row, treeNode, resolve)|—|—| |tree-props|渲染嵌套数据的配置选项|Object|—|{ hasChildren: 'hasChildren', children: 'children' }|

透传 Pagination 分页

|参数|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |small|是否使用小型分页样式|Boolean|—|false| |background|是否为分页按钮添加背景色|Boolean|—|false| |page-size|每页显示条目个数，支持 .sync 修饰符|Number|—|10| |total|总条目数|Number|—|—| |page-count|总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性|Number|—|—| |pager-count|页码按钮的数量，当总页数超过该值时会折叠|Number|大于等于 5 且小于等于 21 的奇数|7| |current-page|当前页数，支持 .sync 修饰符|Number|—|1| |layout|组件布局，子组件名用逗号分隔|String|sizes, prev, pager, next, jumper, ->, total, slot|'prev, pager, next, jumper, ->, total'| |page-sizes|每页显示个数选择器的选项设置|Number[]|—|[10, 20, 30, 40, 50, 100]| |popper-class|每页显示个数选择器的下拉框类名|String|—|—| |prev-text|替代图标显示的上一页文字|String|—|—| |next-text|替代图标显示的下一页文字|String|—|—| |disabled|是否禁用|Boolean|—|false| |hide-on-single-page|只有一页时是否隐藏|Boolean|—|—|

自定义

|参数|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |custom-class|自定义类名|String|—|—| |is-show-head|是否显示操作栏|Boolean|—|false| |head-horizontal-layout|头部水平布局方式|String|left/end/right|end| |head-vertical-layout|头部垂直布局方式|String|top/center/bottom|center| |is-able-config-col|是否打开动态表头功能|Boolean|—|false| |columns-id|表头 id 空则不开启缓存|String|—|—| |check-list|默认选中表头列表|Array|—|—| |limit-min-columns|表头筛选最小限制|Number|—|1| |config-col-icon|动态表头筛选图标配置|Object|—|参数配置见下| |columns|表头数据|Array|—|参数配置见下| |height-type|表格高度撑开模式，adaptive父元素设置多少完全撑开；follow有多少显示多少，直到父元素设置的最大高度时表格内部产生滚动条；第三种为设置固定高度|String|adaptive/follow/normal|follow| |is-show-foot|是否显示底部|Boolean|—|false| |is-fe-page|是否采用前端结合分页|Boolean|—|false| |request-page|后端返回页数|Number|—|10| |foot-horizontal-layout|尾部水平布局方式|String|left/end/right|end| |foot-vertical-layout|尾部垂直布局方式|String|top/center/bottom|center|

config-col-icon

|属性名|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |icon|<i></i>图标路径|String|—|el-icon-s-operation| |size|图标大小|Number|—|16| |color|图标颜色|String（hex）|—|#3D7DFF|

columns

透传 Element Table-column Attributes

|参数|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |type|对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮|String|selection/index/expand|—| |index|如果设置了 type=index，可以通过传递 index 属性来自定义索引|number, Function(index)|—|—| |column-key|column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件|String|—|—| |label|显示的标题|String|—|—| |prop|对应列内容的字段名，也可以使用 property 属性|String|—|—| |width|对应列的宽度|String|—|—| |min-width|对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列|String|—|—| |fixed|列是否固定在左侧或者右侧，true 表示固定在左侧|String, Boolean|true, left, right|—| |render-header|列标题 Label 区域渲染使用的 Function|Function(h, { column, $index })|—|—| |sortable|对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件|Boolean, String|true, false, 'custom'|false| |sort-method|对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致|Function(a, b)|—|—| |sort-by|指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推|String/Array/Function(row, index)|—|—| |sort-orders|数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序|Array|数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序|['ascending', 'descending', null]| |resizable|对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）|Boolean|—|true| |formatter|用来格式化内容 |Function(row, column, cellValue, index)|—|—| |show-overflow-tooltip|当内容过长被隐藏时显示 tooltip|Boolean|—|false| |align|对齐方式|String|left/center/right|left| |header-align|表头对齐方式，若不设置该项，则使用表格的对齐方式|String|left/center/right|—| |class-name|列的 className|String|—|—| |label-class-name|当前列标题的自定义类名|String|—|—| |selectable|仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选|Function(row, index)|—|—| |reserve-selection|仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）|Boolean|—|false| |filters|数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。|Array[{ text, value }]|—|—| |filter-placement|过滤弹出框的定位|String|与 Tooltip 的 placement 属性相同|—| |filter-multiple|数据过滤的选项是否多选|Boolean|—|true| |filter-method|数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。|Function(value, row, column)|—|—| |filtered-value|选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。|Array|—|—|

自定义

|参数|说明|类型|可选值|默认值| |:-------|:-------|:-------|:-------|:-------| |render|自定义列|this.$createElement/h|—|—| |header|自定义列头|this.$createElement/h|—|—|

Events

透传 Table

|事件名|说明|参数| |:-------|:-------|:-------| |select|当用户手动勾选数据行的 Checkbox 时触发的事件|selection, row| |select-all|当用户手动勾选全选 Checkbox 时触发的事件|selection| |selection-change|当选择项发生变化时会触发该事件|selection| |cell-mouse-enter|当单元格 hover 进入时会触发该事件|row, column, cell, event| |cell-mouse-leave|当单元格 hover 退出时会触发该事件|row, column, cell, event| |cell-click|当某个单元格被点击时会触发该事件|row, column, cell, event| |cell-dblclick|当某个单元格被双击击时会触发该事件|row, column, cell, event| |row-click|当某一行被点击时会触发该事件|row, column, event| |row-contextmenu|当某一行被鼠标右键点击时会触发该事件|row, column, event| |row-dblclick|当某一行被双击时会触发该事件|row, column, event| |header-click|当某一列的表头被点击时会触发该事件|column, event| |header-contextmenu|当某一列的表头被鼠标右键点击时触发该事件|column, event| |sort-change|当表格的排序条件发生变化的时候会触发该事件|{ column, prop, order }| |filter-change|当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组|filters| |current-change|当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性|currentRow, oldCurrentRow| |header-dragend|当拖动表头改变了列的宽度的时候会触发该事件|newWidth, oldWidth, column, event| |expand-change|当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）|row, (expandedRows | expanded)|

透传 Pagination 分页

|事件名|说明|参数| |:-------|:-------|:-------| |size-change|pageSize 改变时会触发|每页条数| |prev-click|用户点击上一页按钮改变当前页后触发|当前页| |next-click|用户点击下一页按钮改变当前页后触发|当前页|

自定义

|事件名|说明|参数| |:-------|:-------|:-------| |current-change-page|currentPage 改变时会触发|当前页| |tableHeadChange|表头切换改变事件|checkListBox| |setNextData|页码是后台返回页数的整倍数时且当前总数不超过所选页数|—|

Methods 透传

|方法名|说明|参数| |:-------|:-------|:-------| |clearSelection|用于多选表格，清空用户的选择|—| |toggleRowSelection|用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）|row, selected| |toggleAllSelection|用于多选表格，切换所有行的选中状态|—| |toggleRowExpansion|用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）|row, expanded| |setCurrentRow|用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。|row| |clearSort|用于清空排序条件，数据会恢复成未排序的状态 |—| |clearFilter|不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件|columnKey| |doLayout|对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法|—| |sort|手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。|prop: String, order: String|

Slot

透传 Table

|name|说明| |:-------|:-------| |append|插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。|

透传 Pagination

|name|说明| |:-------|:-------| |pageSlot|自定义内容，需要在 layout 中列出 slot|

自定义

|name|说明| |:-------|:-------| |headLeft|表格头部左侧插槽| |headRight|表格头部右侧插槽|

使用

引入

安装

npm i jimi-table -S

main.js 导入

import JTable from "jimi-table";

Vue.use(JTable);

import "jimi-table/lib/j-table.css";

demo

<template>
  <div class="home">
    <j-table
      :data="tableData"
      :columns="columns"
      layout="total,prev,next,sizes"
      is-able-config-col
      is-show-foot
      :isTableFe="false"
    >
      <div slot="headLeft">
        <div>123</div>
      </div>
      <div slot="headRight">头部右侧</div>
    </j-table>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      optionsDefault: [
        {
          key: 'geofence',
          label: '平台围栏',
          value: '0'
        },
        {
          key: 'geofence',
          label: '用户围栏',
          value: '8'
        },
        {
          key: 'blackCarAddressLibrary',
          label: '黑车库',
          value: '2'
        },
        {
          key: 'clockingIn',
          label: '考勤',
          value: '7'
        }
      ],
      tableData: [
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          type: '0'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: 'ret',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      columns: [
        {
          type: 'expand',
          width: '50px',
          align: 'left',
          render: (h, params) => {
            return h('span', {}, [
              h('div', {}, params.address),
              h('div', {}, params.geoname)
            ])
          }
        },
        {
          type: 'selection',
          width: '50px'
        },
        {
          label: '序号',
          type: 'index'
        },
        {
          label: '区域',
          prop: 'geoname',
          align: 'center',
          tooltip: true
        },
        {
          label: '地址',
          prop: 'address',
          align: 'center',
          tooltip: true,
          'min-width': '250px'
        },
        {
          label: '日期',
          prop: 'date',
          width: '120px',
          align: 'center',
          tooltip: true
        },
        {
          label: '类型',
          prop: 'type',
          width: '80px',
          align: 'left',
          tooltip: true,
          formatter: (row, column, cellValue) => {
            let optionItem = this.optionsDefault.find(
              (item) => item.value == cellValue
            )
            if (optionItem) {
              return optionItem.label
            } else {
              return '-'
            }
          }
        },
        {
          label: '测试仅有H-',
          prop: 'geoname1',
          width: '180px',
          align: 'center',
          tooltip: true,
          header: (h, params, column) => {
            return h('span', { style: 'color: red' }, column.label + 'header')
          }
        },
        {
          label: '测试有H和R-',
          prop: 'geoname2',
          minWidth: '200px',
          align: 'center',
          tooltip: true,
          header: (h, params, column) => {
            return h(
              'span',
              { style: 'color: red' },
              column.label + 'header+render'
            )
          },
          render(h, params) {
            return h(
              'span',
              { style: 'color: green' },
              params['name'] + 'test str'
            )
          }
        },
        {
          label: '测试 + render',
          prop: 'geoname3',
          width: '180px',
          align: 'center',
          tooltip: true,
          render(h, params) {
            return h('span', { style: 'color: blue' }, 'test render')
          }
        }
      ]
    }
  }
}
</script>