v-jntable

a project for janan 主要封装了element的table用来满足项目的table的各种情况

Build Setup

# install dependencies
npm install v-jntable --save

vue项目中的引用
import vJntable from 'v-jntable'
Vue.use(vJntable)

 <v-jntable
      :tableData="equipmentsData"
      :handle-width="300"
      :pagination="true"
      :check-select="true"
      :serial-number="true"
      :handle-btn="true"
      :icon-handle="false"
      :pagiData="pagiData"
      :title-configure="titleData"
      :handle-configure="handleData"
      v-on:handleClick="handleClick"
      v-on:selectionChange="selectionChange"
      v-on:handlePageChange="pageChange"
      v-on:handleSizeChange="handleSizeChange"
    ></v-jntable>

参数说明

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | tableData | table所展示的数据 | Array |-|-| | pagiData | 分页的数据 | objectpagiData |-|{}| | handle-width | 操作项的宽度 | number |-|200| | pagination | 是否有分页 | boolean |-|false| | check-select | 是否有勾选 | boolean |-|false| | serial-number | 是否有序列 | boolean |-|false| | handle-btn | 是否有操作列 | boolean |-|false| | title-configure| 表头的数据值 | Arraytitle |-|[]| | handle-configure | 操作列的具体值 | Arrayhandle |-|[]| | icon-handle-configure | 带有图标的操作列的具体值 | Arrayicon |-|[]|

pagiData是object，对应的参数如下

pagiData

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | currentPage | 当前所在页 | number |-|1| | pageSizes | 当前页可选择的显示的个数集合 | Array |-|[10, 20, 30, 40]| | pageSize | 当前页的个数 | number |-|10| | total | 总个数 | number |-|0|

pagiSizes是可以选择的每页可以显示的数据条数

title-configure

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | prop | 当前列得数据的key的名称 | string |-|-| | label | 当前列表头的名称 | string|-|-| | popoverData | 弹出框显示的内容。当ifPopover为true时，该字段必填 | ArraypopoverData |-|10| | shortNum | 最多显示文字的个数 | number |-|-| | ifPopover | 是否需要弹出框 | boolean |-|-| | width | 该列的宽度 | string |-|-| | ifOnline | 当前列是否是在离线 | boolean |-|-|

popoverData是当ifPopover为true时必填

{
      prop: "inTemp",
      label: "箱内温度",
      popoverData: [{ prop: "inTemp1", label: '箱内温度1' }, { prop: "inTemp2", label: '箱内温度2' }, { prop: "inTemp3", label: '箱内温度3' }],
      shortNum: "4",
      ifPopover: true,
      width: "69"
    }

popoverData

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | prop | 弹出框显示得数据的key的名称 | string |-|-| | label | 弹出框显示数据的名称 | string|-|-|

{ prop: "inTemp1", label: '箱内温度1' }

handle-configure

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | key | 当前操作的key，该key自定义当点击操作后返回相同的key，用于识别点击的哪个操作按钮 | string |-|-| | btnName | 当前操作的名称 | string|-|-| | btn | 当前操作是否可显示 | boolean|-|-|

{
      key: 'modify',
      btnName: '编辑',
      btn: true,
    }

icon-handle-configure

| 参数 | 说明 | 类型 |可选值 |默认值| | ------ | ------ | ------ | ------ | ------ | | prop | 当前列得数据的key的名称 | string |-|-| | label | 当前列表头的名称 | string|-|-| | width | 该列的宽度 | string |-|-| | btnIcon | icon的名称 | string|-|-|

{
      prop: 'virtualLed',
      label: '虚拟站牌',
      width: '69',
      btnIcon: 'el-jn-icon-dianzizhanpai',
    }

事件

| 事件名 | 说明 | 参数 | | ------ | ------ | ------ | | selectionChange | 当前所在页 | - | | handlePageChange | 当前所在页 | - | | handleSizeChange | 当前所在页 | - |

事件无说明