jimi-table v0.1.2

j-table

背景

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

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

组件具象

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

组件头部

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

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

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

筛选列头（动态表头）

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

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

组件中部

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

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

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

组件尾部

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

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

框图

参数配置

Attributes

透传 Table 表格

透传 Pagination 分页

自定义

config-col-icon

columns

透传 Element Table-column Attributes

自定义

Events

透传 Table

透传 Pagination 分页

自定义

Methods 透传

Slot

透传 Table

透传 Pagination

自定义

使用

引入

安装

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>