搜索筛选

介绍

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 | 搜索时触发 | 筛选表单 |