# 通用筛选
> 常用于管理端表格上方筛选过滤

## 导入使用

```code[javascript]
import seFiltrate01 from "ss-universal-client-web/comp/data/su-filtrate-01";
```

## 全部类型

:::demo
```html
<template>
    <div>
        <su-filtrate-01 ref="veFiltrate" :advanced="true" :filtrates="filtrates" @submit="query"
                        :searchLoading="searchLoading"></su-filtrate-01>
        <su-code-viewer :code="codeContent"></su-code-viewer>
    </div>
</template>

<script>
export default {
    components: {
        seFiltrate01,seCodeViewer 
    },
    data() {
        return {
            result: {},  // 筛选条件汇总结果，过滤参数
            searchLoading: false,    // loading效果
            tableData: [],  // 下方表格数据
            filtrates: [   // 过滤筛选配置项
                {
                    type: "text", label: "文字展示1", key: "text",
                    property: {name: "name",id:"id"},
                    getData: function getData(){
                        return {id: "1", name: "只读文字1"}
                    },
                    default: "1"
                },
                {
                    type: "input", label: "文字输入框", key: "userName",
                    property: {type: "input"},
                    default: "需要就给我赋值"
                },
                {
                    type: "input", label: "数字输入框", key: "numValue",
                    property: {type: "number"},
                    default: 456
                },
                {
                    type: "inputRange", label: "数字区间", key: "inputRange",
                    property: {unit: "%"},
                    default: {}
                },
                {
                    type: "doubleSelect", label: "混合选项1", key: "doubleSelect",
                    getData: function getData() {
                        return {
                           left:{1: '启用1', 0: '禁用1'},
                           right:{1: '启用2', 0: '禁用2'}
                       }
                    },
                    property: {right:{filterable: true}},
                    default: {left:"1",right:"0"}
                },
                {
                    type: "doubleSelect", label: "混合选项2", key: "doubleSelect511",
                    getData: function getData() {
                        return {
                            left:{1: '启用1', 0: '禁用1'},
                            right:{1: '启用2', 0: '禁用2'}
                        }
                    },
                    property: {
                        left:{multiple: true},
                        right:{
                           multiple: true,
                            /* 右侧筛选是否获取远程数据 */ 
                            remote: true,
                            /* 右侧筛选远程数据执行回调 */  
                            remoteMethod(query){
                               let right = {1: '启用3', 0: '禁用4',3: query} 
                               return Promise.resolve(right)
                            }  
                        },           
                    },
                    default: {left:["1"],right:["0"]}
                },
                {
                   type: "selectCascader", label: "混合3", key: "selectCascader2", getData: function getData() {
                    return [ {2: '启用', 3: '禁用'},
                            [{id2:'1',name: 'name11',children: [ {id2: '2', name: 'name22',}, {id2: '5', name: 'name33',children: [{id2: '6', name: 'name66',},{id2: '7', name: 'name77'}]}]}]];
                     } ,
                     property: {
                         "props": { 
                             "label": "name", 
                             "value": "id2", 
                             "children": "children", 
                         },               
                     },
                     default: 2
                },
                {
                    type: "selectCascader", label: "混合4", key: "selectCascader", getData: function getData() {
                        return [{1: '启用1', 0: '禁用1'},[{id:'1',name: '第一级',children: [{id: '2', name: '第二级',},{id: '5', name: '第二级2级'}]}] ];
                    } ,
                    property: {
                        "props": { 
                            "label": "name", 
                            "value": "id", 
                            "children": "children",
                            "multiple": true 
                        },
                        
                    },
                     default: 0
                },
                {
                    type: "selectInput", label: "选择输入", key: "selectInput", getData: function getData() {
                        return {1: '启用', 0: '禁用'};
                    },
                    property: {
                        clearable: true
                    },
                    immediateChange: true,
                    default: {input: "12", select: "1"}
                }, 
                
                {
                    type: "select", 
                    label: "是否禁用", 
                    key: "isDisabled", 
                    getData: function getData() {
                        return {
                            1: 123
                        };
                    },
                    property: {}, 
                    change: function change(model, childMap) {
                        var child = childMap["userName"];
                        child.change(model); 
                        child.reRender();
                    },
                    default: ""
                },
                {
                    "type": "treeSelect", "label": "树状多选", "key": "treeSelect12", "getData": function getData() {
                        return [
                            {id: 'id1', name: "name", 
                                 children: [
                                 {
                                      id: 'id2', 
                                      name: "name2"
                                 },
                                 {
                                       id: 'id3', 
                                       name: "name3"
                                 },
                                 ]
                            },
                            {id:'id4', name: "name4", children: [{id: 'id5', name: "name5"}]},
                            {id:'id6', name: "name6"}
                           ];
                        },
                        "property": {
                           "leafOnly":true,
                                         "props": {
                                            "emitPath":false,
                                            "checkStrictly": false, 
                                            "label": "name", 
                                            "value": "id", 
                                            "children": "children",
                                            "multiple":true,
                                         }
                                     },
                                     "default": ["id1"]
                                 },
                                 {
                                     "type": "treeSelect", "label": "树状多选", "key": "treeSelect123", "getData": function getData() {
                                         let  list = [{id: 11, name: "name", children: [{id: 12, name: "name2"}]},{id: 13, name: "name3"},{id:14, name: "name4", children: [{id: 15, name: "name5"}]},{id: 16, name: "name6"}]
                                          return list 
                                     },
                                     "property": {
                                        "leafOnly":false,
                                        "props": {
                                            emitPath:false,
                                            checkStrictly: true,
                                            label: "name",
                                            value: "id",
                                            children: "children",
                                            multiple: true 
                                        }
                                     },
                                   "default": [11,12]
                                 },
                                 {
                                     "type": "treeSelect",
                                     "label": "树状单选择",
                                     "key": "treeSelect14",
                                     "getData": function getData() {
                                          return  [
                                               {id: 1, name: "name", children: [{id: 2, name: "name2"}]}
                                               ,{id: 3, name: "name3"},
                                               {id:4, name: "name4", children: [{id: 5, name: "name5"}]},
                                               {id: 6, name: "name6"}
                                          ]
                                     },
                                     "property": { 
                                        "props": { 
                                           "checkStrictly":true,
                                           "label": "name",
                                           "value": "id",
                                           "children": "children", 
                                        }
                                     },
                                     "default": "1"
                                 },
                                 {
                                     "type": "treeSelect", "label": "树状子节点", "key": "treeSelect15", "getData": function getData() {
                                         return [{id: 1, name: "name", children: [{id: 2, name: "name2"}]},{id: 3, name: "name3"},{id:4, name: "name4", children: [{id: 5, name: "name5"}]},{id: 6, name: "name6"}];
                                     },
                                     "property": {
                                         "props": {
                                             "label": "name", "value": "id", "children": "children"
                                         }
                                     },
                                     "default": "2"
                                 },
                 
                
               {
                    type: "selectDialog",
                    key: "userName22",
                    label: "文字输入框",
                    property: {
                        placeholder: "点击选择",
                        getShowText(data={}) {
                           return data.name;
                        },
                        onclick({data,setData}) {
                           setData({name:data.name+1});
                        }
                    },
                    default: {name:"文字输入框"}
               }, 
               {
                   type: "selectDialog2", 
                    label: "选择标签", 
                    key: "userTagSelect", 
                    property: {
                      type: "userTagSelect"
                    },
                   default: ""
               },
               {
                    type: "datePicker",
                    label: "年月日", 
                    key: "datePicker", 
                    default: "2022-02-03"
               },
               {
                    type: "datePickerYear",
                    label: "年份",
                    key: "datePickerYear", 
                    property: {
                        pickerOptions: {}
                    },
                    default: "2022"
               }, 
               {
                    type: "rangePicker",
                    label: "起止日期(范围)", 
                    key: "receiptDate1",
                    property: {
                        "startPlaceholder": "开始时间",
                        "endPlaceholder": "结束时间",
                        "separator": "至",
                        "minDate": "2022-01-02",
                        "maxDate": "2022-09-20"
                    }
               },
               {
                    type: "rangePicker", 
                    label: "起止月份", 
                    key: "receiptMonth", 
                    property: {
                        "type": "monthrange"
                    },
                    default: {}
               },
               {
                    type: "rangePickerSingle",
                    label: "起止日期独立",
                    key: "rangePickerSingle",
                    property: {},
                    default: {}
               },
               {
                    type: "rangePickerSingle",
                    label: "起止日期独立(范围)", 
                    key: "rangePickerSingle1", 
                    property: {
                        "startPlaceholder": "开始时间",
                        "endPlaceholder": "结束时间",
                        "separator": "至",
                        "minDate": "2022-01-02",
                        "maxDate": "2022-09-20"
                    }
               },
               {
                    type: "rangePickerSingle", 
                    label: "起止时间独立", 
                    key: "timerangePickerSingle", 
                    property: {
                        "type": "time", "minDate": "2020-09-02", "maxDate": "2020-09-20"
                    },
                    default: {
                        "start": "2022-01-03 00:00:00", "end": "2022-09-18 23:59:59"
                    }
               },
               {
                    type: "pickerSelect", 
                    label: "快捷时间选择", 
                    key: "selectPicker", 
                    property: {
                        "type": "selectPicker", "options": [{
                            "label": "本月", "model": {
                                "start": "2022-04-01", "end": "2022-04-31"
                            }
                        },
                            {
                                "label": "今年", "model": {
                                    "start": "2022-01-01", "end": "2022-12-31"
                                }
                            }]
                    },
                    fullLine: true,
                    default: {
                        "start": "2022-01-01", "end": "2022-09-24"
                    }
                },
                {
                    type: "pickerSelect", 
                    label: "限制范围时间选择", 
                    key: "selectPickerLimit", 
                    property: {
                        "type": "selectPickerLimit", "options": [{
                            "label": "本月", "model": {
                                "start": "2022-04-01", "end": "2022-04-31"
                            }
                        },
                            {
                                "label": "今年", "model": {
                                    "start": "2022-01-01", "end": "2022-12-31"
                                }
                            }], "autoSet": true
                    }
                },
                {
                    type: "selectRangePicker",
                    label: "选择日期", 
                    key: "selectRangePicker1", 
                    getData: function getData() {
                       return {'1': '创建时间',  '2': '修改时间'}
                    },
                   property: {
                       type: 'daterange' ,
                   },
                    default: {
                       start: "2022-06-01" ,
                       end: "2022-06-13",
                       select: "1"                     
                    }
                },
                {
                    type: "treeSelect",
                    label: "项目",
                    key: "projectId",
                    immediateChange: true,
                    getData: function getData() {
                        return [{id: 1, name: "name", children: [{id: 2, name: "name2"}]},{id: 3, name: "name3"}];
                    },
                    property: {
                        "props": {
                            "label": "name", "value": "id", "children": "children"
                        }
                    },
                    default: "",
                    change: function change(model, childMap) { 
                        var child = childMap["subjectId"];
                        child.change(''); 
                        child.getData = function (model) {
                            return {a:"a",b:"b"};
                        };
                        child.reRender();
                        var classTypeItem = childMap["subjectId"]; 
                        classTypeItem.property.projectId = model;
                        classTypeItem.property.studentclassYear = '2020';
                        classTypeItem.property.dptId = 'DPT20200409010000004155';
                        classTypeItem.change([]); 
                        classTypeItem.reRender();
                    }
                },
                {
                    type: "select",
                    label: "科目", 
                    key: "subjectId", 
                    getData: function getData() {
                        return {};
                    },
                    property: {
                        "filterable": true
                    },
                    default: ""
                }
],
        }
    },
    computed:{
        codeContent(){
            return JSON.stringify(this.result)
        }
    },
    methods: {
        query(result) { 
            this.result = result;
            this.searchLoading = true;
            this.getTableData(this.result);  // 根据条件请求表格数据
            // 查询结束后，关闭loading效果，
            this.searchLoading = false;
        }
        ,
        getTableData(obj) {
            //console.log(obj)
        }
    }
}
</script>

```
:::


## Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |--------------                        |---------- |------      |--------
| little    |  设置筛选项目比较少的筛选样式             | Boolean    | -- | false
| advanced  |  是否展开显示所有                       | Boolean    | -- | true
| defSubmit  |  是否默认会执行一次submit事件           | Boolean    | -- | true
| filtrates |  过滤条件配置项                        | Array         |            |

## filtrates-item
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |--------------                        |---------- |------      |--------
| type    |  筛选项类型标识             | String    | -- | --|
| label   |   筛选项左侧label           | String    | -- | --|
| key |  筛选项在总筛选数据对象的key      | String  |  -- | --|
| required |  是否必填,必填则显示*号      | Boolean  |  -- | false|
| fullLine |  筛选项是否整行显示      | Boolean  |  -- | false|
| property |  筛选项的配置      | Object  |  -- | --|
| default |  默认显示数据      | any  |  -- | --|
| data |  渲染数据,与getData只需要设置一个      | any  |  -- | --|
| getData |  获取渲染数据 返回数据或promise     | function  |  -- | --|
| immediateChange |  是否直接执行变化事件      | Boolean  |  -- | false|
| change |  数据变化的回调事件(model, childMap)=>{}; model: 当前值，childMap:所有筛选项     | function  |  -- | --|

```code[javascript]
    let child = childMap["subjectId"];

    //覆盖节点配置项
    Object.assign(this,{
        /* 筛选项配置 */
        property:{},
        /* 节点获取数据方式 */
        getData() {
            return {a:"a",b:"b"};
        }
    })
    //设置筛选项结果值并触发变化事件
    child.change("");
    //重新渲染节点
    child.reRender();
```
____

## Slot

```code[html]
<su-filtrate-01 ...>
	<el-button slot="primaryPrv" @click="MsgBox.alert('点击更多条件')">更多条件</el-button>
	<el-button slot="dashedNext" @click="MsgBox.alert('点击高级筛选')">高级筛选</el-button>
</su-filtrate-01>
```

| 插槽名称        | 说明      |
|----------      |--------  |
| primaryPrv     | 更多条件  |
| dashedNext     | 高级筛选  |

## Events

| 事件名称    | 说明     |
|---------- |-------- |
| submit    | 默认会执行一次，可通过添加 :defSubmit="false" 去除|
| reset    | 如果设置则点击重置按钮派发事件，否则执行submit事件|

## Methods

| 方法名称    | 说明     |
|---------- |-------- |
| getResult()    | 获取筛选数据 |
| getChildMap()    | 获取所有已注册筛选项 |
| reload(options)    | 重新渲染组件|

```code[html]
/**
 * 重新渲染组件 更改总配置项时使用
 * @param options
 * @param options.filtrates 原始配置项 不传则取当前组件缓存配置
 * @param options.bindHistoryData 是否绑定渲染前已经存储的数据 默认为true
 */
reload(options);
```

## 各类型说明
### text 纯文字展示
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
            {
                type: "text",
                key: "text",
                label: "文字展示",
                getData(){
                    return {id: "2", name: "文字展示文字展示文"}
                },
                property: {name: "name",id:"id"},
                default: "2"
            },
            {
                type: "text",
                key: "text2",
                label: "输入框禁用",
                getData(){
                    return {id: "2", name: "文字展示文字展示文"}
                },
                property: {name: "name",id:"id",styleInput:true},
                default: "2"
            }]
        }
    },
}
</script>
```
:::

#### value
> 数据格式标准`Object` 例：{id: "123", name: "只读文字123"}
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| name    |  显示的value的key值| String    | -- | name |
| styleInput    | 输入框样式|  Boolean | -- |false |
### textObject 纯文字展示
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                type: "textObject",
                key: "text",
                label: "文字展示",
                property: {name: "name"},
                default: {id: "3", name: "只读文字3"}
            },
            {
                type: "textObject",
                key: "text2",
                label: "输入框禁用", 
                property: {name: "name",styleInput:true},
                default:  {id: "2", name: "只读文字4"}
            }
            ]
        }
    },
}
</script>
```
:::

#### value
> 数据格式标准`Object` 例：{id: "123", name: "只读文字123"}
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| name    |  显示的value的key值| String    | -- | name |
| styleInput    | 输入框样式|  Boolean | -- |false |


### input 文本输入
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                   type: "input",
                   key: "userName",
                   label: "文字输入框",
                   property: {type: "input"},
                   default: "需要就给我赋值"
               },{
                   type: "input",
                   key: "numValue",
                   label: "数字输入框",
                   property: {type: "number"},
                   default: 456
               }]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`String|number` 
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| type    |  输入框类型 | String    | input/number | input |
| maxlength |  最大长度| String/Number     | --  | 180|
| clearable    | 否支持清空选项| Boolean    | --  | true |
| placeholder  |   提示信息 | String    | -- | 请选择 |

### inputRange 数字区间
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                    type: "inputRange", label: "数字区间", key: "inputRange",
                    property: {unit: "%"},
                    default: {start:1,end:2}
                }]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`Map`
```code[javascript]
    let value = { "start": 1, "end": 2 };
```

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| start     | 起始值           | number | — | — |
| end | 结束值 | number |  — | — |
 
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| type    |  输入框类型 | String    | input/number | input |
| startPlaceholder    | 开始框提示语 | String    |  -- | 请输入 |
| endPlaceholder    |  结束框提示语 | String    |   | 请输入 |
| separator    |   选择范围时的分隔符|String    | -- | ~ |
| maxlength   |  最大长度| String/Number     | --  | 180|
| clearable    | 否支持清空选项| Boolean    | --  | true |
| unit    |  输入框尾部内容 | --  | --| -- |
### select 选择
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                    type: "select",
                    label: "默认第一项",
                    key: "s1", 
                    getData() {
                        return {
                            1: 123
                        };
                    },
                    property: { 
                        clearable :false
                    }, 
                    default: ""
                },{
                      type: "select",
                      label: "下拉选择", 
                      key: "s2", 
                      getData() {
                          return [{value:11,label:123},{value:22,label:456}];
                      },
                      property: {  
                        filterable:false
                      },  
                      default: ""
                }, {
                     type: "select", label: "自定义带props", key: "s3", getData() {
                         return [{value:"11",label:123}];
                     },
                     property: {
                         multiple: true,
                         clearable:false,
                         placeholder: "请输入自定义文字",
                         /* 筛选是否获取远程数据 */
                         remote: true,
                         /* 筛选远程数据执行回调 */
                         remoteMethod(query){
                            let list = {a:'a',b:'b',c:'c','d':query} 
                            return Promise.resolve(list); 
                              
                         }
                     },
                     default: []
                },
                {
                    type: "select",
                    label: "多选可搜索",
                    key: "se4",
                    getData: function getData() {
                      return  { "1": '启用', "0": '禁用' };
                    }, 
                    property: {  
                       multiple:true,  
                    }, 
                    default: []
                },
                {
                   type: "select",
                   label: "输入下拉筛选",
                   key: "se5",
                   getData: function getData() {
                      return [{id:11,name:'rgr'},{id:22,name:'4r4t5'},{id:33,name:'4r444'}];
                   },
                   property: {  
                      multiple:true,
                      remote:true,
                      placeholder: "请输入自定义文字", 
                      props: {
                          label: "name",
                          value: "id"
                      },
                      remoteMethod: function remoteMethod(query) {
                          let list = [{id:11,name:'rgr'},{id:22,name:'4r4t5'},{id:33,name:'4r444'},{id:44,name:query}]  
                          return Promise.resolve(list); 
                      } 
                   },
                   default: []
                },
            ]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`String|number` 
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| filterable   |  是否支持过滤 | Boolean    | input/number | true |
| clearable    |  是否支持清空选项(为false的时候，默认值为空时默认显示第一项)| Boolean    | --  | true |
| disabled     |  是否支持禁用| Boolean    | --  | false|
| placeholder    |  提示信息 | String    | -- | 请选择 |
| multiple    | 是否多选 | Boolean    | -- | false |
| remote    | 是否远程数据 | Boolean    | -- | false |
| props.value    | 指定选项的值为选项对象的某个属性值 | string    | -- | value |
| props.label    | 指定选项标签为选项对象的某个属性值 | string    | -- | label |
| remoteMethod   | 远程数据获取方法 | Function    | -- | -- |

### doubleSelect 双下拉
:::demo
```html

<template>
    <div>
        {{ result }}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        let data = {
            left:{1: '启用1', 0: '禁用1'},
            right:{1: '启用2启用2启用2启用2', 0: '禁用2禁用2禁用2禁用2'}
        };
        return {
            result: {},
            filtrates: [
            {
                type: "doubleSelect", label: "双下拉1", key: "doubleSelect1",
                data,
                property: {},
                default: {left:"1",right:"0"}
            }, {
                type: "doubleSelect", label: "双下拉2", key: "doubleSelect2",
                data,
                property: {left:{multiple: true}},
                default: {left:["1"],right:"0"}
            }, {
                type: "doubleSelect", label: "双下拉3", key: "doubleSelect3",
                data,
                property: {right:{multiple: true}},
                default: {left:"1",right:["0"]}
            }, {
                type: "doubleSelect", label: "双下拉4", key: "doubleSelect511",
                data,
                property: {
                    left:{multiple: true},
                    right:{
                        multiple: true,
                        /* 右侧筛选是否获取远程数据 */ 
                        remote: true,
                        /* 右侧筛选远程数据执行回调 */  
                        remoteMethod(query){
                           let right = {1: '启用3', 0: '禁用4',3: query} 
                           return Promise.resolve(right)
                        }  
                    },
                    
                },
                default: {left:["1"],right:["0"]}
            }]   
        } 
    },
}
</script>


```
:::
#### value
> 数据格式标准`Map` 

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| left     | 左侧数据           | Array[n]/String | — | — |
| right | 右侧数据 | Array[n]/String |  — | — |

#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| left    | 左侧| Map   | -- |  {} |
| left.placeholder    | 左侧-提示信息 | String    | -- | 请选择 |
| left.multiple    | 左侧-是否多选 | Boolean    | -- | false |
| left.filterable    | 左侧-是否过滤 | Boolean    | -- | true |
| left.clearable    |  是否支持清空选项| Boolean    | --  | true |
| left.width    | 左侧-宽度 | String    | -- | 130px |
| right    | 右侧| Map   | -- |  {} |
| right.placeholder    | 右侧-提示信息 | String    | -- | 请选择 |
| right.clearable   | 是否支持清空选项| Boolean    | --  | true |
| right.multiple    | 右侧-是否多选 | Boolean    | -- | false |
| right.filterable    | 右侧-是否过滤 | Boolean    | -- | true |
| right.remote    | 右侧-是否远程数据 | Boolean    | -- | false |
| right.remoteMethod   | 右侧-远程数据获取方法 | Function    | -- | -- |

### selectInput 选择输入
:::demo
```html

<template>
    <div>
        {{ result }}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                    type: "selectInput", label: "选择输入", key: "selectInput", getData: function getData() {
                        return {1: '启用', 0: '禁用'};
                    },
                    property: {
                        inputPlaceholder: "inputPlaceholder"
                    },
                    immediateChange: true,
                    default: {select: "1",input: "12"}
                },{
                      type: "selectInput", label: "", key: "selectInput1", getData: function getData() {
                          return {'label1': '启用','label2': '禁用'};
                      },
                      property: {
                           inputPlaceholder: {'label1': "请输入启用", 'label2': "请输入禁用"},
                      },
                      immediateChange: true,
                      default: {select: "label1",input: ""}
                  }]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`Map` 

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| select     | 左侧数据           | String | — | — |
| input | 右侧数据 | String |  — | — |

#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| maxlength    | 最大输入长度 | Number    | -- | 180 |
| selectPlaceholder    | 右侧-提示信息 | String    | -- | 请选择 |
| inputPlaceholder    | 左侧-提示信息 | String/map    | -- | 请输入 |
| clearable   | 是否支持清空选项| Boolean    | --  | true |

### selectRangePicker 选择日期区间
:::demo
```html

<template>
    <div>
        {{ result }}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [{
                 type: "selectRangePicker",
                 label: "选择日期", 
                 key: "selectRangePicker", 
                 getData: function getData() {
                    return {1: '创建时间',  2: '修改时间'}
                 },
                property: {
                    type: 'daterange' ,
                    minDate: '2022-06-01',
                    maxDate: '2022-06-30'
                },
                 default: {
                    start: "2022-06-01" ,
                    end: "2022-06-13",
                    select: "1"                     
                 }
               }]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`Map` 

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| select     | 左侧数据           | String | — | — |
| start | 开始时间 | String |  — | — |
| end |结束时间 | String |  — | — |

#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| type    | 显示类型 | String    | datetimerange/daterange/monthrange | daterange |
 | startPlaceholder   | 范围选择时开始日期的占位内容| String    | -- | 开始日期 |
 | separator   |  选择范围时的分隔符|String    | -- | ~ |
 | endPlaceholder   |  范围选择时结束日期的占位内容| string | -- |结束日期|
 | format    |  显示在输入框中的格式	 | String    | 'YYYY-MM-DD hh:mm:ss'/'YYYY-MM-DD'/'YYYY-MM' | 'YYYY-MM-DD'|
 | minDate | 限制最小日期 | String | 'YYYY-MM-DD hh:mm:ss'/'YYYY-MM-DD'/'YYYY-MM' | 'YYYY-MM-DD'|
 | maxDate | 限制最大日期 | String | 'YYYY-MM-DD hh:mm:ss'/'YYYY-MM-DD'/'YYYY-MM' | 'YYYY-MM-DD'|
 | pickerOptions    | 当前时间日期选择器| object    | -- | {}|
 | pickerOptions.disabledDate    | 设置禁用状态，参数为当前日期，要求返回 Boolean| Function    | -- | --|

### selectCascade 单选后级联
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>
<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
                    {
                       "type": "selectCascader", "label": "单选后级联单选", "key": "selectCascader2", "getData": function getData() {
                           return [{2: '启用', 3: '禁用'},[{id2:'1',name: 'name11',children: [{id2: '2', name: 'name22',},{id2: '5', name: 'name33',children: [{id2: '6', name: 'name66',},{id2: '7', name: 'name77'}]}]}] ];
                       } ,
                       "property": {
                          "props": { 
                             "label": "name", 
                             "value": "id2", 
                             "children": "children",
                             "multiple": false
                           },               
                       },
                       default: ['2',[1]]
                    },
                    {
                    "type": "selectCascader", "label": "单选后级联复选", "key": "selectCascader", "getData": function getData() {
                        return [{1: '启用1', 0: '禁用1'},[{id:'1',name: '第一级',children: [{id: '2', name: '第二级',},{id: '5', name: '第二级2级'}]}] ];
                    } ,
                    "property": {
                        "props": { 
                            "label": "name", 
                            "value": "id", 
                            "children": "children",
                            "multiple": true 
                        },
                        
                    },
                     default: [0,['5']]
                },
                 ]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`Array` 
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| left   |  左侧配置项 | Object | -- | -- |
| left.Placeholder    |  左侧单选提示信息 | String    | -- | 请选择 |
| left.Clearable    |  左侧是否支持清空选项 | boolean    | -- | false |
| left.Width         |  左侧宽度| String    |   --      | 75px |
| right   |  右侧配置项 | Object | -- | -- |
| right.Placeholder  |  右侧提示语  | String    |   --      |  请选择 |   
| right.Clearable    |  右侧是否支持清空选项 | boolean    | -- | false |
| right.disabled    |  右侧是否禁用| boolean    | -- | false |
| right.rightLeafOnly    | 选中父节点时是否返回父节点的值| boolean    | -- | false |
| props    |  右侧交互配置 | Object    | -- | -- |
| props.multiple    | 是否多选| Boolean    | -- | false |
| props.checkStrictly    | 是否严格的遵守父子节点不互相关联 | Boolean    | -- | false |
| props.disabled    |  是否禁用| boolean    | -- | false |
| props.value    | 指定选项的值为选项对象的某个属性值 | string    | -- | value |
| props.label    | 指定选项标签为选项对象的某个属性值 | string    | -- | label |
| props.children    | 指定选项的子选项为选项对象的某个属性值 | string    | -- | children |

### filterCheckSelect 多选可搜索
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>
<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [  
                    {
                      "type": "filterCheckSelect",
                      "label": "多选可搜索",
                      "key": "filterCheckSelect",
                      "getData": function getData() {
                          return  { "1": '启用', "0": '禁用' };
                      },  
                      "default": []
                    },
                    {
                      "type": "filterCheckSelect",
                      "label": "多选可搜索",
                      "key": "filterCheckSelect2",
                      "getData": function getData() {
                          return [];
                      },
                      "property": {  
                           "remote":true,
                           "placeholder": "请输入自定义文字",
                            "props": {
                                "label": "name",
                                "value": "Id"
                            },
                            "remoteMethod": function remoteMethod(query) {
                                let list = {a:'a',b:'b',c:'c','d':query} 
                                return Promise.resolve(list); 
                            } 
                      },
                      "default": []
                    },
            ]
        }
    },
}
</script>
```
:::
 #### value
 > 数据格式标准`Array` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | filterable  | 是否可搜索| Boolean    | -- | true |
 | multiple    | 是否多选| Boolean    | -- | true |
 | collapseTags   |  多选时是否将选中值按文字的形式展示| Boolean    | -- | false |
 | remote    |    筛选是否获取远程数据  | Boolean   | -- | false |
 | props.disabled    |  是否禁用| boolean    | -- | false |
 | props.value    | 指定选项的值为选项对象的某个属性值 | string    | -- | value |
 | props.label    | 指定选项标签为选项对象的某个属性值 | string    | -- | label |
 | remoteMethod   | 远程数据获取方法 | Function    | -- | -- |
 ### treeSelect 树状子节点
 :::demo
 ```html
 <template>
     <div>
         {{result}}
         <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
     </div>
 </template>
 
 <script>
 export default {
     components: {seFiltrate01},
     data() {
         return {
             result: {},
             filtrates: [
                    {
                     "type": "treeSelect", "label": "树状多选", "key": "treeSelect12", "getData": function getData() {
                         return [
                            {id: 'id1', name: "name", children: 
                                [
                                    {
                                        id: 'id2', 
                                        name: "name2"
                                    },
                                    {
                                        id: 'id3', 
                                        isG: true,        
                                        name: "name3(已禁用)"
                                    },
                                ]},
                            {id:'id4', name: "name4", children: [{id: 'id5', name: "name5"}]},
                            {id:'id6', name: "name6"}
                         ];
                     },
                     "property": {
                         "leafOnly":true,
                         "props": {
                            "emitPath":false,
                            "checkStrictly": false, 
                            "label": "name", 
                            "value": "id", 
                            "children": "children",
                            "multiple":true,
                            isGrey: 'isG'
                         }
                     },
                     "default": ["id1"]
                 },
                 {
                     "type": "treeSelect", "label": "树状多选", "key": "treeSelect123", "getData": function getData() {
                         let  list = [{id: 11, name: "name", children: [{id: 12, name: "name2"}]},{id: 13, name: "name3"},{id:14, name: "name4", children: [{id: 15, name: "name5"}]},{id: 16, name: "name6"}]
                          return list 
                     },
                     "property": {
                        "leafOnly":false,
                        "props": {
                            emitPath:false,
                            checkStrictly: true,
                            label: "name",
                            value: "id",
                            children: "children",
                            multiple: true 
                        }
                     },
                     "default": [11,12]
                 },
                 {
                     "type": "treeSelect",
                     "label": "树状单选择",
                     "key": "treeSelect14",
                     "getData": function getData() {
                          return  [
                               {id: 1, name: "name", children: [{id: 2, name: "name2"}]}
                               ,{id: 3, name: "name3"},
                               {id:4, name: "name4", children: [{id: 5, name: "name5"}]},
                               {id: 6, name: "name6"}
                          ]
                     },
                     "property": { 
                        "props": { 
                           "checkStrictly":true,
                           "label": "name",
                           "value": "id",
                           "children": "children", 
                        }
                     },
                     "default": "1"
                 },
                 {
                     "type": "treeSelect", "label": "树状子节点", "key": "treeSelect15", "getData": function getData() {
                         return [{id: 1, name: "name", children: [{id: 2, name: "name2"}]},{id: 3, name: "name3"},{id:4, name: "name4", children: [{id: 5, name: "name5"}]},{id: 6, name: "name6"}];
                     },
                     "property": {
                         "props": {
                             "label": "name", "value": "id", "children": "children"
                         }
                     },
                     "default": "2"
                 },
                 ]
         }
     },
 }
 </script>
 
 ```
 :::
 #### value
 > 数据格式标准`String|Array` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | leafOnly   |  父节点选中是否返回父节点的值(仅返回叶子节点)| Boolean | -- | false |
 | filterable    |  是否支持过滤 | Boolean    | -- | false |
 | clearable    |   是否支持清空选项 | boolean    | -- | true |
 | disabled     |  是否支持禁用| Boolean    | --  | false|
 | placeholder    |  提示信息 | String    | -- | 请选择 |
 | showAllLevels    |  是否显示选中项所在的完整路径 | Boolean    | -- | true |
 | props    |  交互配置 | Object    | -- | -- |
 | props.expandTrigger    | 次级菜单的展开方式 | String    | click / hover | hover |
 | props.emitPath    | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | Boolean    | -- | true |
 | props.multiple    | 是否多选 | Boolean    | -- | false |
 | props.checkStrictly    | 是否严格的遵守父子节点不互相关联 | Boolean    | -- | false |
 | props.value    | 指定选项的值为选项对象的某个属性值 | string    | -- | value |
 | props.label    | 指定选项标签为选项对象的某个属性值 | string    | -- | label |
 | props.children    | 指定选项的子选项为选项对象的某个属性值 | string    | -- | children |
 
 
### selectDialog 点击弹窗
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [ 
                {
                   type: "selectDialog",
                   key: "userName",
                   label: "文字输入框",
                   property: {
                         placeholder: "点击选择",
                         getShowText(data={}) {
                             return data.name;
                         },
                         onclick({data,setData}) {
                            setData({name:data.name+1});
                         }
                     },
                   default: {name:" "}
                }, 
                {
                   type: "selectDialog2",
                   label: "选择标签", 
                   key: "userTagSelect",
                   property: {
                       type: "userTagSelect",
                        placeholder: "点击选择", 
                   },
                   default: ""
                },  
            ]
        }
    },
}
</script>

```
:::
#### value
> 数据格式标准`data` 
#### property
| 参数      | 说明          | 类型      | 可选值 | 默认值  |
|---------- |-------------|----------|------|--------|
| placeholder    |  提示信息 | String    | -- | 请选择 |
| getShowText(data)    |  获取展示的信息 | function(data:设置的数据)    | -- | (data)=>"") |
| onclick({data,setData})    |  点击选择区域的回调 | function({data:当前选择数据,setData:通过setData(data);设置选择数据})    | -- | (data)=>"") |
| placeholder    |  提示信息 | String    | -- | 请选择 |
| type  |  弹框类型 |   String   | -- |  userTagSelect |
 
### datePickerYear 年份
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
                { 
                    "type": "datePickerYear",
                    "label": "年份",
                    "key": "datePickerYear",
                    "property": {
                       "pickerOptions": {
                          //disabled为函数，返回值为布尔值，
                          disabledDate: (time) => {
                             let minYear = new Date().getFullYear() - 6     
                             let maxYear = new Date().getFullYear() + 2   
                             return time.getTime()> new Date(JSON.stringify(maxYear)) || time.getTime() < new Date(JSON.stringify(minYear))
                          }  
                       }
                    },
                    "default": "2021"
                } 
            ]
        }
    },
}
</script>
```
:::
 #### value
 > 数据格式标准`String` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | format   |  显示在输入框中的格式	| string | -- |   YYYY|
 | placeholder    |  输入框提示信息 | String    | -- | 请选择 |
 | disabled    |  是否禁用| boolean    | -- | false |
 | pickerOptions    | 当前时间日期选择器|object | -- | {}|
 ### datePicker 年月日
 :::demo
 ```html
 <template>
     <div>
         {{result}}
         <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
     </div>
 </template>
 
 <script>
 export default {
     components: {seFiltrate01},
     data() {
         return {
             result: {},
             filtrates: [
                 { 
                     "type": "datePicker",
                     "label": "年月日",
                     "key": "datePicker", 
                     "default": "2019-02-03"
                 },
                 
                 
             ]
         }
     },
 }
 </script>
 
 ```
 :::
  #### value
  > 数据格式标准`String` 
  #### property
  | 参数      | 说明          | 类型      | 可选值 | 默认值  |
  |---------- |-------------|----------|------|--------| 
  | placeholder    |  输入框提示信息 | String    | -- | 请选择 |
  | type  | string | year/month/date/week/ datetime/datetimerange/daterange|date|
  | disabled    |  是否禁用| boolean    | -- | false |
### rangePicker 起止日期
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
                {  
                    "type": "rangePicker",
                    "label": "起止日期",
                    "key": "receiptDate",
                    "property": {
                         "startPlaceholder": "开始时间",
                         "endPlaceholder": "结束时间",
                         "separator": "至"
                    },
                    "default": {
                          "start": "2022-04-09",
                          "end": "2025-06-22"
                    }
                },
                {
                    "type": "rangePicker",
                    "label": "起止日期(范围)",
                    "key": "receiptDate1",
                    "property": {
                       "startPlaceholder": "开始时间",
                       "endPlaceholder": "结束时间",
                       "separator": "至",
                       "minDate": "2022-03-02",
                       "maxDate": "2022-09-20"
                    }
                },
            ]
        }
    },
}
</script>

```
:::
 #### value
 > 数据格式标准`String` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | type   |  显示类型	| string | daterange/monthrange| daterange |
 | startPlaceholder   | 范围选择时开始日期的占位内容| String    | -- | 开始日期 |
 | separator   |  选择范围时的分隔符|String    | -- | ~ |
 | endPlaceholder   |  范围选择时结束日期的占位内容| string | -- |结束日期|
 | format    |  显示在输入框中的格式	 | String    | 'YYYY-MM-DD'/'YYYY-MM' | 'YYYY-MM-DD'|
 | pickerOptions    | 当前时间日期选择器| object    | -- | {}|
 | pickerOptions.disabledDate    | 设置禁用状态，参数为当前日期，要求返回 Boolean| Function    | -- | --|
 | editable   |  文本框可输入| boolean| -- | true | 
 | disabled    |  是否禁用| boolean    | -- | false |
### rangePickerSingle 起止日期独立
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
                {  
                     "type": "rangePickerSingle",
                     "label": "起止日期独立",
                     "key": "rangePickerSingle",
                     "property": {},
                     "default": {}
                }, 
                {
                     "type": "rangePickerSingle",
                     "label": "起止日期独立(范围)",
                     "key": "rangePickerSingle1",
                     "property": {
                         "startPlaceholder": "开始时间",
                         "endPlaceholder": "结束时间",
                         "separator": "至",
                         "minDate": "2022-01-02",
                         "maxDate": "2022-09-20"
                     }
                },
                {
                   "type": "rangePickerSingle",
                   "label": "起止时间独立",
                   "key": "timerangePickerSingle",
                   "property": {
                      "type": "time",
                      "minDate": "2022-01-02",
                      "maxDate": "2022-09-20"
                   },
                   "default": {
                       "start": "2022-01-03 00:00:00",
                       "end": "2022-09-18 23:59:59"
                   }
                }
            ]
        }
    },
}
</script>

```
:::
 #### value
 > 数据格式标准`Map` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | type   |  显示类型	| string | day/time | day |
 | startPlaceholder   | 范围选择时开始日期的占位内容| String    | -- | 开始日期 |
 | separator   |  选择范围时的分隔符|String    | -- | 至 |
 | endPlaceholder   |  范围选择时结束日期的占位内容| string | -- |结束日期|
 | format    |  显示在输入框中的格式	 | String    | 'YYYY-MM-DD' /'YYYY-MM-DD hh:mm:ss'| 'YYYY-MM-DD'|
 | startPickerOptions    | 开始时间日期选择器| object    | -- | {}|
 | startPickerOptions.disabledDate    | 设置禁用状态，参数为当前日期，要求返回 Boolean| Function    | -- | --|
 | endPickerOptions    | 结束时间日期选择器| object    | -- | {}|
 | endPickerOptions.disabledDate    | 设置禁用状态，参数为当前日期，要求返回 Boolean| Function    | -- | --| 
### pickerSelect 快捷时间选择
:::demo
```html
<template>
    <div>
        {{result}}
        <su-filtrate-01 :filtrates="filtrates" @submit="(res)=>{result=res;}"></su-filtrate-01>
    </div>
</template>

<script>
export default {
    components: {seFiltrate01},
    data() {
        return {
            result: {},
            filtrates: [
                 {
                      "type": "pickerSelect",
                      "label": "快捷时间选择",
                      "key": "selectPicker",
                      "property": {
                           "type": "selectPicker",
                           "options": [
                                {
                                  "label": "本月",
                                  "model": {
                                      "start": "2020-09-01",
                                      "end": "2020-09-31"
                                  }
                                },
                                {
                                      "label": "今年",
                                      "model": {
                                          "start": "2020-01-01",
                                          "end": "2020-12-31"
                                      }
                                }
                           ]
                      },
                      "fullLine": true,
                      "default": {
                           "start": "2020-09-16",
                           "end": "2020-09-24"
                      }
                 },
            ]
        }
    },
}
</script>

```
:::
 #### value
 > 数据格式标准`Map` 
 #### property
 | 参数      | 说明          | 类型      | 可选值 | 默认值  |
 |---------- |-------------|----------|------|--------|
 | type   |  显示类型	| string | -- | selectPicker |
 | placeholder   | 提示语| String    | -- | 点击选择 |