vue-znl-basegrid v1.1.16

vue-znl-basegrid

正能量vue表格控件 1.0.0

安装

npm install vue-znl-basegrid -S

使用

• 完整引用

import Vue from 'vue'
import vueZnlBasegrid from 'vue-znl-basegrid'
import App from './App.vue'

Vue.use(vueZnlBasegrid)

new Vue({
  el: '#app',
  render: h => h(App)
})

• 按需引用
  • vue-znl-basegrid的每种组件，都已单独打包到lib文件夹下

|- lib/
    |- znl-actionflexgrid/index.js  -------------- 可编辑表格
    |- znl-baseflexgrid/index.js  --------------- 基础表格
    |- znl-layout-spa/index.js  --------- 单页布局
    ...

• 使用时，可以直接将单个组件引入到项目中

import Vue from 'vue'
import znlBaseflexgrid from 'vue-znl-basegrid/src/lib/components/znl-baseflexgrid/index.js'
import App from './App.vue'

Vue.use(znlBaseflexgrid)

new Vue({
  el: '#app',
  render: h => h(App)
})

配置

 <znl-baseflexgrid
   	ref="znlbasegrid"
  </znl-baseflexgrid>

• 基础列配置columns

  key	Description	default	type	indispensable
  visible	是否显示	true	Boolen
  name	列名		String	yes
  isReadOnly	是否只读	true	Boolen
  dataType	数据类型	Object-1,String-2,Numver-3, Boolean-4,Date-5,Array-6.	Number	yes
  showDropDown	数据是否以下拉框方式显示（需配置datamap）	false	Boolen
  binding	列字段		String	yes
  width	列宽		Number	yes
  buttons	按钮		Array
  elements	dom元素字符串		Array/Function
  isFieldsSearch	是否允许搜索		Boolean

• elements配置

  key	Description	default	type	indispensable
  name	显示元素		String	yes
  click	单击事件		Function
  mouseenter	鼠标移入事件		Function
  mouseleave	鼠标移出事件		Function

• rightMenus右键菜单配置选项

• key	Description	default	type	indispensable
  iconName	字体图标		String
  text	显示内容		String	yes
  display	是否显示	true	Boolean
  click	触发函数		Function

znl-baseflexgrid

• Props

name	Description	default	type	indispensable
columns	列配置		Array	yes
height	表格高度		Number,String
maxHeightData	最大高度		Number,String
minHeight	最小高度		Number,String
itemSource	表格数据		Array	yes
isMultiRowsCheck	可否多选	false	Boolean
isFieldsSearch	是否支持搜索	false	Boolean
pageSize	每页条数	20	Number
pageIndex	当前页	1	Number
totalCount	总条数		Number
rightMenus	右键菜单选项配置		Array
onRefresh	刷新		Function
onSearch	搜索		Function
onPageChanged	翻页回调(有该参数，且totalCount，pageIndex大于0则显示分页器)		Function
gridtype	表格类型	base	String
searchTodayDate	存在日期搜索时是否初始化为当天搜索（需传入初始搜索条件）	false	Boolean
searchFields	搜索条件		Object

• Slots 自定义插槽

name	Description	type	default

• METHODS方法

name	Description	arguments	retrun
getSelectedRows	获取已选择数据		checkedRows
transformSubmitValue	带datamap数据name=>key转换	requestData	data
transformShowValue	带datamap数据key=>name转换	requestData	data
gridItemSourceData	temSource处理值		ItemSourceData
cancelAllChecked	取消选中
clearSelection	清空所有选择（包括单击，样式恢复等）
search	搜索	event
gridItemSourceData	获取表格数据		Array

• Events

name	Description	arguments
select-check-rows	选择后回调	row,lengthBoolean
selection-changed	选项改变	rows
checked-rows-count	选项改变(清空，修改)	length
ondblclick	双击后回调	row, col, cell, {}, noVisibleCols, colIndex

• 演示

znl-actionflexgrid

• Props（包含znl-baseflexgrid所有props）

name	Description	default	type	indispensable

• Slots 自定义插槽

name	Description	type	default

• METHODS方法（包含znl-baseflexgrid所有METHODS）

name	Description	arguments	retrun

• Events（包含znl-baseflexgrid所有Events）

name	Description	arguments

• 演示

znl-gridmodule

• Props（包含znl-baseflexgrid,znl-actionflexgrid所有props）

name	Description	default	type	indispensable
checkboxBindingKey	bindingkey，决定是否显示保存取消按钮和选中条数等提示		String
has-znl-btns	是否显示标题及按钮组（一行）	true	Boolean
onRefresh	刷新方法(存在时显示刷新按钮及右键刷新菜单)		Function
onSaveSetting	设置方法（用于配置表格，存在时显示设置按钮）		Function
header	标题
onInit	初始化函数		Function
isInit	是否用传入的初始化函数初始化组件	true	Boolean
search-fields	搜索条件（组件会监听这个传入的参数变化，传入搜索条件改变时触发onsearch）		Object
pageSize	每页条数	20	Number
pageIndex	当前页	1	Number
totalCount	总条数		Number
searchTodayDate	存在日期搜索时是否初始化为当天搜索（不需要额外传入搜索条件，该参数为true时自动搜索当天数据）	false	Boolean
has-znl-actions	顶部搜索栏存在时必需传入true（即需要传入action-form插槽的时候必需设置为true）	false	Boolean
actionBtns	顶部按钮组数据name:名称，iconName:图标，click:点击事件	[]	Array
gridtype	表格类型（action / base）	base	String
grid-show	模块是否显示	true	Boolean
isFieldsSearch	是否支持搜索	false	Boolean

• Slots 自定义插槽

name	Description	type	default
header	标题的solt形式嵌入
action-form	顶部搜索栏(按钮组下方,存在该插槽时has-znl-actions参数必需为true)

• METHODS方法（包含znl-baseflexgrid,znl-actionflexgrid所有METHODS）

name	Description	arguments	retrun
search	执行搜索函数

• Events（包含znl-baseflexgrid,znl-actionflexgrid所有Events）

name	Description	arguments

• 演示

  ​

znl-griddialog 表格选择/编辑弹出框

• Props

name	Description	default	type	indispensable
onRefresh	刷新方法(存在时显示刷新按钮及右键刷新菜单)		Function
onSaveSetting	设置方法（用于配置表格，存在时显示设置按钮）		Function
onInit	初始化函数		Function
isInit	是否用传入的初始化函数初始化组件	true	Boolean
search-fields	搜索条件（组件会监听这个传入的参数变化，传入搜索条件改变时触发onsearch）		Object
pageSize	每页条数	20	Number
page-index	当前页	1	Number
total-count	总条数		Number
gridtype	选择模块(base)/编辑编辑(action)	base	String
visible	dialog模块是否显示	false	Boolean
columns	列配置		Array	yes
itemSource	表格数据		Array	yes
height	弹出框高度	50%	Array,String

• Slots 自定义插槽

name	Description	type	default
action-form	顶部搜索栏(按钮组下方,存在该插槽时has-znl-actions参数必需为true)
footer	按钮操作区的内容

• METHODS方法（包含znl-baseflexgrid,znl-actionflexgrid所有METHODS）

name	Description	arguments	retrun
search	执行搜索函数

• Events（包含znl-baseflexgrid,znl-actionflexgrid所有Events）

name	Description	arguments
confirm / base 选择模块	获取选择数据	选择的数据Array
confirm /action 编辑模块	获取已编辑的数据	已编辑的数据Array
open	打开模块时的回调	无
close	关闭模块时的回调	无

• 演示

图表组件

znl-chart

• xyoption图表配置选项

• Props

name	Description	default	type	indispensable
xyoption	图表配置			yes
resizable	是否随页面大小改变	true	Boolean
loading	loading是否显示	true	Boolean
titles	标题		String
height	组件高度（传入高度为整个组件高度，包括标题，一般用默认100%即占满整个父盒子）	100%	String,Number
on-ready	渲染前执行的方法		Function
grid-show	模块是否显示	true	Boolean

• Slots 自定义插槽

name	Description	type	default
znl-action	搜索，按钮等插槽

• METHODS方法

name	Description	arguments	retrun

• Events

name	Description	arguments
open	打开模块时的回调	无
close	关闭模块时的回调	无

• 演示

znl-imgviewer 图片查看组件

• Props

name	Description	default	type	indispensable
img-src-array	图片地址数组		Array	yes
initial-index	初始激活索引	0	Number
visible	模块是否显示	false	Boolean
height	模块高度	50%	String,Number

• Slots 自定义插槽

name	Description	type	default

• METHODS方法

name	Description	arguments	retrun

• Events

name	Description	arguments
open	打开模块时的回调	无
close	关闭模块时的回调	无

• 演示

znl-dialog 自定义弹出框组件

• Props

name	Description	default	type	indispensable	arguments
visible	模块是否显示	false	Boolean
height	模块高度	50%	String,Number
confirm-call-back	确认时的回调				传进的slot插槽dom

• Slots 自定义插槽

name	Description	type	default
znl-dialog	自定义插槽(外层必须时div)

• METHODS方法

name	Description	arguments	retrun

• Events

name	Description	arguments
open	打开模块时的回调	无
close	关闭模块时的回调	无

• 演示