# 自定义筛选

## 导入使用

```code[javascript]
import seFiltrateDiy from "ss-universal-client-web/comp/data/su-filtrate-diy";
```
## 基本用法

:::demo
```html
<template>
    <div>
        <su-filtrate-diy  @submit="getList" @reset="reset"
                          :searchLoading="searchLoading"
        >
            <su-filtrate-diy-item term="名字">
                <el-input type="text" v-model="query.name" />
            </su-filtrate-diy-item>
            <su-filtrate-diy-item term="性别">
                <el-select v-model="query.sex">
                    <el-option label="男" value="man" />
                    <el-option label="女" value="woman" />
                </el-select>
            </su-filtrate-diy-item>
        </su-filtrate-diy>
    </div>
</template>

<script>
//import seFiltrateDiy from "ss-universal-client-web/comp/data/su-filtrate-diy";
export default {
    components:{
        seFiltrateDiy,
        seFiltrateDiyItem: seFiltrateDiy.item
    },
    data () {
        return {
            query: {
                name: '',
                sex: ''
            },
            searchLoading: false
        }
    },
    methods:{
        reset () {
            this.query = {
                name: '',
                sex: ''
            }
            this.getList()
        },
        getList () {
            // do something
        }
    }
}
</script>
```
:::

### Attributes

| 参数          | 说明                                                         | 类型    | 默认值 | 指                                |
| ------------- | ------------------------------------------------------------ | ------- | ------ | --------------------------------- |
| advanced      | 当筛选项过多时，是否默认显示全部                             | Boolean | false  | true：展示全部，false：折叠       |
| little        | 控制查询和重置按钮位置，注意，当advanced属性为false时，请谨慎使用该属性，当此属性为true时，将不展示展开按钮，如果筛选项被折叠，此属性又为true，很可能造成查询按钮及被折叠的筛选项不显示 | Boolean | false  | true：行内展示，false：固定右下角 |
| searchLoading | 加载状态                                                     | Boolean | false  | true：加载中，false：无状态       |
| size          | 超出多少个筛选项时折叠，advanced为false时生效                | Number  | 20      | -                                 |

### Events

| 事件名称 | 说明         | 回调参数 |
| -------- | ------------ | -------- |
| submit   | 点击查询按钮 | -        |
| reset    | 点击重置按钮 | -        |

### Condition-Item Attributes

| 参数 | 说明       | 类型   | 默认值 |
| ---- | ---------- | ------ | ------ |
| term | 筛选项名称 | String | -      |

### Condition-Item Slot

| name | 说明                 |
| ---- | -------------------- |
| -    | Condition Item的内容 |