vue2-querybuilder-simple v0.1.9

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功能暂未实现，后续有空继续补全

Customize configuration

See Configuration Reference.