vue2-querybuilder-simple
v0.1.9
Published
## Project setup ``` npm install ```
Downloads
9
Maintainers
Readme
querybuilder
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
examples
------------ main.js ----------------------------------------
import querybuilder from 'vue2-querybuilder-simple'
import 'vue2-querybuilder-simple/lib/querybuilder-simple.css'
Vue.use(querybuilder)
------------ components ----------------------------------------
<template>
<query-builder-simple :level="level" :btnNames="btnNames" :conditions="conditions" :addFieldOpt="addFieldOpt" :operatorOpt="operatorOpt" @addCallBack="addCallBack"></query-builder-simple>
</template>
<script>
import QueryBuilderSimple from './lib/queryBuilderSimple'
export default {
name: 'querybuilder',
data() {
return {
level: 5,
btnNames: ["Add Group", "Add Rule"],
conditions: [
{
id: 2,
name: "AND"
},
{
id: 1,
name: "OR"
}
],
addFieldOpt: [
{
id: 1,
name: "timestamp"
},
{
id: 2,
name: "hostname"
},
{
id: 3,
name: "source"
},
{
id: 4,
name: "message"
}
],
operatorOpt: [
{
id: 1,
value: "Starts With",
showVal: true
},
{
id: 2,
value: "Ends With",
showVal: true
},
{
id: 3,
value: "Contains",
showVal: true
},
{
id: 4,
value: "Equal",
showVal: true
},
{
id: 5,
value: "Not Equal",
showVal: true
},
{
id: 6,
value: "In",
showVal: true
},
{
id: 7,
value: "Not In",
showVal: true
},
{
id: 8,
value: "Is Empty",
showVal: false
},
{
id: 9,
value: "Is Not Empty",
showVal: false
},
{
id: 10,
value: "Is Null",
showVal: false
},
{
id: 11,
value: "Is Not Null",
showVal: false
}
]
}
},
components: {
QueryBuilderSimple,
},
methods: {
addCallBack(data) {
console.log(data)
}
}
}
</script>
参数说明
| 参数 | 说明 | 子参数说明 |
| :----: | :----: | :----: |
| level | 嵌套层级(n+1层) | 决定允许增加嵌套的层级数 |
| btnNames | 自定义按钮列表 | 只允许修改两个按钮名称 |
| conditions | 规则列表 | |
| addFieldOpt | 字段列表 | |
| operatorOpt | 操作符列表 | showVal 控制是否显示value输入框 |
| addCallBack | 新增行回调函数,接收当前的数组对象 |
其他
本插件是基于"ant-design-vue": "^1.7.8"和"vue-json-viewer": "^2.2.22",导致包比较大,慎重选择。
SQL rule功能暂未实现,后续有空继续补全