@lambo-design-mobile/search

搜索筛选

介绍

Search是一个搜索筛选组件 搜索框置顶，右侧有可选的筛选按钮，点击筛选按钮，右侧弹出筛选的区域，内容为FORM表单

引入

import Vue from 'vue';
import Search from '@lambo-design-mobile/search;

Vue.use(Search);

代码演示

基础用法

<search @doSearch="doSearch" />

export default {
    methods: {
        doSearch(searchVal, fieldForm) {
            console.log('doSearch', searchVal, fieldForm)
        }
    }
}

带筛选条件搜索

<search :value="searchForm"
        :showFilter="searchFormFields && searchFormFields.length > 0"
        :fieldList="searchFormFields"
        @doSearch="doSearch">
</search>

export default {
    data() {
        return {
            searchForm: {
                "billId": "",
                "sampleId": "",
            },
            searchFormFields: [{
                "title": "报检单号", "formKey": "billId", "type": "input", "required": true,
                "props": {
                    "maxlength": "32", "clearable": true, "placeholder": "请输入报检单号"
                }
            }, {
                "title": "样品编号", "formKey": "sampleId", "type": "input", "required": false,
                "props": {
                    "maxlength": "32", "clearable": true, "placeholder": "请输入样品编号"
                }
            }]
        }
    },
    methods: {
        doSearch(searchVal, fieldForm) {
            console.log('doSearch', searchVal, fieldForm)
        }
    }
}

Props

参数	说明	类型	默认值	版本
value	筛选条件表单	object	-	-
showFilter	是否显示筛选	boolean	-	-
fieldList	筛选列表	object	-	-

Events

事件名	说明	回调参数
doSearch	搜索时触发	筛选表单