【mone-query】基于 element-ui 的通用查询组件

mone-queryGithub: https://github.com/jczzq/mone...Demo: https://blog.jczzq.com/mone-q...mone-query是基于element-ui封装的通用查询组件，它通过丰富的配置让你尽可能少的前端编码就可以完成大部分报表需求。必要依赖vue >= 2.5.2 element-ui >= 2.4.0 axios >= 0.16.0安装CommonJS方式npm install mone-query -Dumd方式<link href=“mone-query/lib/style.css” rel=“stylesheet”><script src="../mone-query/lib/index.js"></script>快速上手import Vue from “vue”;import ‘mone-query/style.css’;import MoneQuery from “mone-query”;Vue.use(MoneQuery, { // options …})<mone-query border :config=“config” :data=“data” />…import Config from “@/Config.json”;import Data from “@/Data.json”;data() { return { // 传入请求路径 config: “/api/config”, data: “/api/data” // or // 传入对象 config: Config.resultData, data: Data.resultData };}运行机制校验入参mone-query有两个必要参数config和data, config控制表格结构和自定义功能，data渲染数据行，这两个参数可以传入ajax路径字符串，也可以传入json对象，其他类型的参数传入时会抛出异常。注意组件还有其它一些参数可以传入，组件传入的参数与config有一些参数是重复的，甚至你还可以在Vue.use时给所有的组件实例传入默认参数，这是为了增加组件配置的灵活性，不过通过组件直接传入的参数优先级最高，config属性其次，最后是默认配置根据config参数获取配置如果config传入字符串，那么组件首先会发起Get请求查询配置json，这段期间表格会一直loading到请求结束，如果请求失败，表格将会触发on-error事件，使用者可以监听事件做后续处理，或者让页面保持错误面板的状态；请求成功的结果将直接作为配置对象使用。如果config传入json，将直接作为配置对象使用(具体结构示例参照Config.json)。根据配置对象渲染表结构受配置影响的部分包括：colbox: 工具栏的字段面板cols: 表头……根据data参数获取结果集如果data传入字符串，那么组件会将之作为ajax路径查询结果集。如果data传入json，将直接作为结果集使用（具体结构示例参照Data.json）。有时候在结果集渲染之前需要对某些字段进行处理，比如映射新值、时间转换等等，这时提供formatters对象，这是一个属性名为col.prop、属性值为该列过滤函数的对象，过滤函数有四个形参：row, column, cellValue, indexMoneQuery Attributes属性名类型含义可选值默认值*configObject , String表头列ajax路径配置对象{}*dataArray , String数据行ajax路径数据集合[]heightString/NumberTable高度auto8080pxautomax-heightString/NumberTable的最大高度–borderBoolean是否带有纵向边框-falseprimary-keyString主键(数据行多选时必要)-idpage-nameString分页参数中的pageSize键名-pageIndexsize-nameString分页参数中的pageSize键名-pageSizerows-nameStringajax请求结果集键名-resultData.rowstotal-nameStringajax请求结果总数键名-resultData.totalcolboxObject字段显示框方位-{ placement: “top”, width: “540px”, trigger: “click” }visible-fieldsBoolean,Array默认显示字段true: 全部显示; false: 全部隐藏; [“propA”, “propB”, …]truevisible-fields-configArray<FieldGroup>字段在工具栏的显示配置–formattersObject包含各个列过滤函数的对象-{}show-actionBoolean是否显示右侧操作栏-falseshow-deleteBoolean是否显示删除按钮-falseshow-headerBoolean是否显示表头（包含筛选条件）-trueshow-selectionBoolean是否显示多选框-trueshow-indexBoolean是否自定义序列-falseMoneQuery Events事件名说明参数delete点击删除按钮触发selectionsearch点击查询按钮触发parametersconfig-success查询配置成功resconfig-error查询配置失败errorconfig-complete查询配置完成(成功或失败都会触发)-data-success查询结果集成功resdata-error查询结果集失败errordata-complete查询结果集完成(成功或失败都会触发)-config Attributes属性名类型含义可选值默认值baseUrlStringajax根路径–primary-keyString主键(数据行多选时必要)-idcolsArray<Col>列-idpage-nameString分页参数中的pageSize键名-pageIndexsize-nameString分页参数中的pageSize键名-pageSizerows-nameStringajax请求结果集键名-resultData.rowstotal-nameStringajax请求结果总数键名-resultData.totalcolboxObject字段显示框方位-{ placement: “top”, width: “540px”, trigger: “click” }visible-fieldsBoolean,Array默认显示字段true: 全部显示; false: 全部隐藏; [“propA”, “propB”, …]truevisible-fields-configArray<FieldGroup>字段在工具栏的显示配置–show-actionBoolean是否显示右侧操作栏-falseshow-deleteBoolean是否显示删除按钮-falseshow-headerBoolean是否显示表头（包含筛选条件）-trueshow-selectionBoolean是否显示多选框-trueshow-indexBoolean是否自定义序列-falsecolbox Attributes属性名类型含义可选值默认值placementString展示方位-topwidthString面板宽度-540pxtriggerString触发事件类型-clickCol class属性名类型含义可选值默认值labelString列标题–propString列字段名–typeString列字段类型varchar、option、date、datetime-widthString列宽度widthwidthorderNumber排列顺序–actionString查询类型-varchar:lk,option:in; data:lt& gt; datetime:le& geplaceholderString输入提示–fixedBoolean是否固定列–optionsArray多选组件的选项列表,eg: [{label, value}]–Col.type enum枚举值含义varchar文本option多选date日期datetime日期时间FieldGroup class属性名类型含义可选值默认值titleString组标题–orderString排列顺序–selectionArray选中的–checkAllBoolean是否全选-trueisIndeterminateBoolean是否半选-falsecolPropsArray组成员–查询配置标准结构（application/json）resultCode 响应码resultData 响应结果(注意resultData必须是JSON对象)primaryKey String 主键prop（默认：id）rowsName String 结果集属性名，将根据rowsName指定的属性名获取目标结果集(默认: resultData.rows)totalName String 结果总数属性名，将根据totalName指定的属性名获取目标结果总数(默认: resultData.total)pageName String 当前页属性名，将根据pageName指定的属性名设置分页参数(默认: pageIndex)sizeName String 每页条数属性名，将根据sizeName指定的属性名设置分页参数(默认: pageSize)pageSize Number 默认每页查询的数据数量(默认: 20)cols Array 列头（字段）对象集合label String 标题prop String 属性名type String 属性类型varchar 文本option 多选date 日期datetime 日期时间bit 单选（暂不支持）int 数字（暂不支持）time 时间（暂不支持）width String 列宽order Number 排列顺序colbox Object 可选字段配置placement String 展示方位（默认：top）width String 面板宽度（默认：540px）trigger String 触发事件类型（默认：click）value Array （默认：所有字段）查询参数标准结构（application/json）colProps Array 要查询的字段列params Array 查询参数字段field Stringaction Stringeq 等于ne 不等于in 包含在ni 不包含在sw start withew end withlk likegt 大于lt 小于ge 大于等于le 小于等于filedType Stringvarchar 字符串option 多选date 日期范围datetime 日期时间范围bit 单选（暂不支持）int 数字（暂不支持）time 时间（暂不支持）value anysort Array 排序字段prop String 字段名type String 排序方式asc 正序desc 降序page ObjectpageIndex Number 当前页（默认：1）pageSize Number 每页多少条（默认：20）# 查询参数示例cols: [“name”, “age”, “grade”, “isMarried”, “birthday”, “schoolTime”],params: [ { field: “name”, action: “lk”, filedType: “varchar”, value: “李”, }, { field: “birthday”, action: “lt”, filedType: “datetime”, value: “2019-04-13”, }, { field: “birthday”, action: “ge”, filedType: “datetime”, value: “2019-03-13”, }, { field: “grade”, action: “in”, filedType: “option”, value: [1,2,5], }]sort: [ { prop: “age’, type: “asc” }],page: { pageIndex: 1, pageSize: 20}查询结果集标准结构（application/json）[resultCode] 响应码[resultData] 响应结果[rows] 结果集[total] 结果总数轻量版mone-query默认依赖element-ui部分组件和axios请求库，这里有两个构建版供你的应用选择：全部引入(js≈360kb, style≈103kb)：包括element相关组件(可以在应用中使用这些组件，因为它们已经全局注册过了)；另外是axios。只引入核心代码(≈24kb, style≈1kb)，如果你的应用已经引入了element和axios，那建议只引入核心代码即可。 import “mone-query/lib/lite/style.css”; import moneQuery from “mone-query/lib/lite”; …PS： 这里说来说去最终不影响物质守恒，如果你不是太关心你应用的构建体积可以忽略