gwt-condition-tree

gwt-report

金水表达式生成插件

简介

gwt-condition-tree是一套基于 Vue2、elementUI, 将表达式树形展示，并可视化生成表达式的插件

插件使用

# main.js
import GwtConditionTree from 'gwt-condition-tree'
import 'gwt-condition-tree/lib/conditionTree.css'

Vue.use(GwtConditionTree)

# 组件内 optData,title可不传，内设有默认值
<GwtConditionTree :expression.sync="expression" :tree="tree" :list="list"></GwtConditionTree>

参数

    list: {
        type: Array,
        default: () => [],
    },
    //最大深度
    maxLevel: {
        type: Number,
        default: () => 4,
    },
    //树形结构回显
    tree: {
        type: Array,
        default: () => [],
    },
    //表达式
    expression: {
        type: String,
        default: () => '',
    },

参数结构

    expression: '',
    list: [
        { label: '年龄', value: 'age' },
        { label: '性别', value: 'sex' },
        { label: '姓名', value: 'name' },
    ],
    tree: [
        { id: 'a1', parentId: null, type: 'condition', level: 1, attribute: 'name', symbol: '' },
        { id: 'a2', parentId: null, type: 'connector', level: 1, connector: '&&' },
        {
            id: 'a7',
            parentId: null,
            type: 'conditionGroup',
            level: 1,
            children: [
                { id: 'a8', parentId: 'a7', type: 'condition', level: 2, attribute: 'age', symbol: '' },
                { id: 'a9', parentId: 'a7', type: 'connector', level: 2, connector: '||' },
                { id: 'a10', parentId: 'a7', type: 'condition', level: 2, attribute: 'sex', symbol: '' },
            ],
        },
    ],