v-jntable

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	当前所在页	-

事件无说明