更新记录

2.0（2024-04-04）

细节优化

1.1（2024-03-25）

最后呈现方式：

[
    {
        "orList": [
            {
                "title": "member",
                "orWhereValue": [
                    "sex",
                    "1"
                ]
            },
            {
                "title": "member",
                "orWhereValue": [
                    "jifen",
                    "6",
                    "1",
                    "100"
                ]
            }
        ]
    },
    {
        "orList": [{
            "title": "cost"
        }]
    }
]

将这个前端Json数组参数传递给后端开发人员，拼接查询SQL

1.0（2024-03-25）

支持H5，小程序的话，自己需要针对性的改一改，主要是一些select框\文本框，逻辑是不变的。

平台兼容性

插件使用方式：

template代码

<multi :filters="multiFilter" @confirm="callback"></multi>

最后返回输出值，交给后端人员拼接。

[{
        "orList": [{
                "title": "member",
                "orWhereValue": [
                    "sex",
                    "1"
                ]
            },
            {
                "title": "member",
                "orWhereValue": [
                    "jifen",
                    "6",
                    "1",
                    "100"
                ]
            }
        ]
    },
    {
        "orList": [{
            "title": "cost"
        }]
    }
]

js代码

import Multi from "@/components/multi-condition-filtering/multi-condition-filtering"
  export default {
      components: {
        Multi
      },
      data() {
        return {
                multiFilter:[
                               {
                                   mykey:'member',
                                   mytitle:'会员信息',
                                   menuList:[
                                       {
                                           title:'性别',
                                           module:'memberSex',
                                           component: () => import('@/components/multi-condition-filtering/sex')
                                       },
                                       {
                                           title:'积分',
                                           module:'memberjifen',
                                           component: () => import('@/components/multi-condition-filtering/jifen')
                                       }
                                   ]
                               },
                               {
                                   mykey:'cost',
                                   mytitle:'消费行为',
                               },
                               {
                                   mykey:'tags',
                                   mytitle:'标签行为'
                               }
                           ]
            }
        },
    onLoad: function() {
    },
    methods: {
        callback(jsonArr){
            console.log(jsonArr)
        }
    }
  }