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 | 关闭模块时的回调 | 无 |

• 演示