xjh-components v1.0.2

xjh-components

介绍

本项目是基于Element-UI扩展的常用组件库。

使用方式

安装：

npm install xjh-components -S

引入:

import XJHComponents from 'xjh-components'
import 'xjh-components/lib/xjh-components.css'

Vue.use(XJHComponents)

组件

1. 动态表单组件JsonForm:

   Attributes

   参数	说明	类型	默认值	可选值
   inline	行内表单模式	Boolean	false	-
   label-width	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。	String	auto	-
   json	表单配置数组jsonItem，jsonItem配置详见下表	Array	[]	-
   model	表单数据对象	Object	{}	-
   label-position	表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width	String	right	right/left/top

   jsonItem

   参数	说明	类型	默认值	可选值
   label	标签文本	String	-	-
   type	组件类型	String	-	text/input/textarea/inputNumber/select/selectRemote/button/switch/checkbox/radio/datePicker/timePicker/cascader/table/image/colorPicker/slider/stake
   key	对应表单数据对象model字段名称	String	-	-
   placeholder	占位符	String	-	-
   option	可选项数据源，仅type为select/selectRemote/radio/checkbox/cascader时有效	Array	[]	-
   validate	表单验证规则	Object/Array	-	-
   disabled	是否禁用	Boolean	false	-
   maxlength	最大输入长度，仅type为input/textarea有效	Number	-	-
   readonly	是否只读，仅type为input/image有效	Boolean	false	-
   min	设置计数器允许的最小值，仅type为inputNumber有效	Number	-Infinity	-
   max	设置计数器允许的最大值，仅type为inputNumber有效	Number	Infinity	-
   precision	数值精度，仅type为inputNumber有效	Number	-	-
   step	计数器步长，仅type为inputNumber有效	Number	1	-
   componentType	组件二级类型，仅type为select/datePicker	String	-	group/date
   hideClear	是否隐藏清空选项，仅type为select有效	Boolean	false	-
   multiple	是否可以多选，仅type为select有效	Boolean	false	-
   collapseTags	多选时是否将选中值按文字的形式展示，仅type为select/cascader有效	Boolean	false	-
   filterable	是否可搜索，仅type为select有效	Boolean	false	-
   valueKey	作为 value 唯一标识的键名，绑定值为对象类型时必填，仅type为select有效	String	value	-
   loading	是否正在从远程获取数据，仅type为selectRemote有效	Boolean	false	-
   onClick	点击事件，仅type为button有效	Function	-	-
   format	时间显示格式，形如yyyy-MM-dd hh:mm:ss，仅type为datePicker/timePicker时有效	String	-	-
   arrowControl	是否使用箭头进行时间选择，仅type为timePicker有效	Boolean	false	-
   pickerOptions	当前时间日期选择器特有的选项，同中picker-options，仅type为datePicker/timePicker有效	Object	{}	-
   isRange	是否为时间范围选择，仅type为timePicker有效	Boolean	false	-
   startPlaceholder	范围选择时开始日期的占位内容，仅type为datePicker有效	String	-	-
   endPlaceholder	范围选择时结束日期的占位内容，仅type为datePicker有效	String	-	-
   props	级联选择器配置项，同中props，仅type为cascader有效	Object	{}	-

2. 动态表格组件JsonTable:

   Attributes

   参数	说明	类型	默认值	可选值
   height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	String/Number	false	-
   loading	是否显示加载数据动效	Boolean	false	-
   stripe	是否为斑马纹 table	Boolean	false	-
   json	表格配置项，详见下表	Object	{ tbody: [], thead: [] }	-
   highlight	是否要高亮当前行	Boolean	false	-
   row-key	行数据的Key，用来优化 Table 的渲染。	String	-	-
   check-on-click	是否点击行时触发toggleRowSelection事件	Boolean	false	-

   json

   参数	说明	类型	默认值	可选值
   thead.label	显示的标题	String	-	-
   thead.column	对应列内容的字段名	String	-	-
   thead.width	对应列的宽度	String	-	-
   thead.align	对齐方式	String	left	left/center/right
   thead.fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	String/Boolean	false	true/false/left/right
   thead.slot	是否为插槽	Boolean	false	-
   tbody	表格数据	Array	[]	-
   index	索引列配置	Objetc	{}	-
   selection	多选表格配置	Objetc	{}	-

   index

   参数	说明	类型	默认值	可选值
   enable	是否开启	Boolean	false	-
   width	索引列宽度	String/Number	-	-
   label	显示的标题	String	-	-
   formatter	自定义索引	number, Function(index)	-	-

   selection

   参数	说明	类型	默认值	可选值
   enable	是否开启	Boolean	false	-
   width	列宽度	String/Number	-	-
   reserveSelection	在数据更新之后保留之前选中的数据（需指定 row-key）	Boolean	false	-

   Event

   事件	说明	参数
   select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
   select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
   selection-change	当选择项发生变化时会触发该事件	selection
   current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
   row-click	当某一行被点击时会触发该事件	row, column, event
   item-click	当某单元格被点击时会触发该事件	row

3. 分页表格组件PaginationTable:

   Attributes

   参数	说明	类型	默认值	可选值
   table	表格配置项，同中json	Object	{}	-
   table-height	表格高度	String/Number	300	-
   load-created	是否在created中触发读取第一页数据操作	Boolean	true	-
   check-on-click	是否点击行时触发toggleRowSelection事件	Boolean	true	-
   row-key	行数据的Key，用来优化 Table 的渲染。	String	id	-
   highlight	是否要高亮当前行	Boolean	false	-
   fetch-data	获取表格数据方法	Function	new Promise((resolve, reject) => { resolve({}) })	-
   pagination-center	分页组件是否居中显示	Boolean	true	-
   page-size	每页显示条目个数	Number	10	-

   Event

   事件	说明	参数
   select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
   select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
   selection-change	当选择项发生变化时会触发该事件	selection
   current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
   row-click	当某一行被点击时会触发该事件	row, column, event