mone-query是针对vue的通用查询组件，依赖vue、element-ui和axios。它提供便捷的配置，减少前端编码工作。安装后通过Vue.use注册并配置，支持从ajax路径获取配置和数据，也可直接传入json对象。组件提供事件监听、数据处理等功能，包括字段映射、时间转换等。
mone-query
mone-query是基于element-ui封装的通用查询组件，它通过丰富的配置让你尽可能少的前端编码就可以完成大部分报表需求。
必要依赖
vue >= 2.5.2
element-ui >= 2.4.0
axios >= 0.16.0
安装
CommonJS方式
npm install mone-query -D
umd方式
快速上手
import Vue from "vue";
import 'mone-query/style.css';
import MoneQuery from "mone-query";
Vue.use(MoneQuery, {
// options
...
})
...
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, index
MoneQuery Attributes
属性名
类型
含义
可选值
默认值
*config
Object , String
表头列
ajax路径配置对象
{}
*data
Array , String
数据行
ajax路径数据集合
[]
height
String/Number
Table高度
auto8080px
auto
max-height
String/Number
Table的最大高度
-
-
border
Boolean
是否带有纵向边框
-
false
primary-key
String
主键(数据行多选时必要)
-
id
page-name
String
分页参数中的pageSize键名
-
pageIndex
size-name
String
分页参数中的pageSize键名
-
pageSize
rows-name
String
ajax请求结果集键名
-
resultData.rows
total-name
String
ajax请求结果总数键名
-
resultData.total
colbox
Object
字段显示框方位
-
{ placement: "top", width: "540px", trigger: "click" }
visible-fields
Boolean,Array
默认显示字段
true: 全部显示; false: 全部隐藏; ["propA", "propB", ...]
true
visible-fields-config
Array
字段在工具栏的显示配置
-
-
formatters
Object
包含各个列过滤函数的对象
-
{}
show-action
Boolean
是否显示右侧操作栏
-
false
show-delete
Boolean
是否显示删除按钮
-
false
show-header
Boolean
是否显示表头(包含筛选条件)
-
true
show-selection
Boolean
是否显示多选框
-
true
show-index
Boolean
是否自定义序列
-
false
MoneQuery Events
事件名
说明
参数
delete
点击删除按钮触发
selection
search
点击查询按钮触发
parameters
config-success
查询配置成功
res
config-error
查询配置失败
error
config-complete
查询配置完成(成功或失败都会触发)
-
data-success
查询结果集成功
res
data-error
查询结果集失败
error
data-complete
查询结果集完成(成功或失败都会触发)
-
config Attributes
属性名
类型
含义
可选值
默认值
baseUrl
String
ajax根路径
-
-
primary-key
String
主键(数据行多选时必要)
-
id
cols
Array
列
-
id
page-name
String
分页参数中的pageSize键名
-
pageIndex
size-name
String
分页参数中的pageSize键名
-
pageSize
rows-name
String
ajax请求结果集键名
-
resultData.rows
total-name
String
ajax请求结果总数键名
-
resultData.total
colbox
Object
字段显示框方位
-
{ placement: "top", width: "540px", trigger: "click" }
visible-fields
Boolean,Array
默认显示字段
true: 全部显示; false: 全部隐藏; ["propA", "propB", ...]
true
visible-fields-config
Array
字段在工具栏的显示配置
-
-
show-action
Boolean
是否显示右侧操作栏
-
false
show-delete
Boolean
是否显示删除按钮
-
false
show-header
Boolean
是否显示表头(包含筛选条件)
-
true
show-selection
Boolean
是否显示多选框
-
true
show-index
Boolean
是否自定义序列
-
false
colbox Attributes
属性名
类型
含义
可选值
默认值
placement
String
展示方位
-
top
width
String
面板宽度
-
540px
trigger
String
触发事件类型
-
click
Col class
属性名
类型
含义
可选值
默认值
label
String
列标题
-
-
prop
String
列字段名
-
-
type
String
列字段类型
varchar、option、date、datetime
-
width
String
列宽度
width
width
order
Number
排列顺序
-
-
action
String
查询类型
-
varchar:lk,option:in; data:lt& gt; datetime:le& ge
placeholder
String
输入提示
-
-
fixed
Boolean
是否固定列
-
-
options
Array
多选组件的选项列表,eg: [{label, value}]
-
-
Col.type enum
枚举值
含义
varchar
文本
option
多选
date
日期
datetime
日期时间
FieldGroup class
属性名
类型
含义
可选值
默认值
title
String
组标题
-
-
order
String
排列顺序
-
-
selection
Array
选中的
-
-
checkAll
Boolean
是否全选
-
true
isIndeterminate
Boolean
是否半选
-
false
colProps
Array
组成员
-
-
查询配置标准结构(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 String
action String
eq 等于
ne 不等于
in 包含在
ni 不包含在
sw start with
ew end with
lk like
gt 大于
lt 小于
ge 大于等于
le 小于等于
filedType String
varchar 字符串
option 多选
date 日期范围
datetime 日期时间范围
bit 单选(暂不支持)
int 数字(暂不支持)
time 时间(暂不支持)
value any
sort Array 排序字段
prop String 字段名
type String 排序方式
asc 正序
desc 降序
page Object
pageIndex 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： 这里说来说去最终不影响物质守恒，如果你不是太关心你应用的构建体积可以忽略
扫一扫
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
