# SuSelect 选择

> 其他属性方法同element框架中的el-select，更多用法及示例可查看element官网

## 导入使用
```code[javascript]
import SuSelect from "ss-universal-client-web/comp/form/su-select";
```

## 模式1-单选

:::demo
```html
<template>
    <div>
        {{ model }}
        <su-select 
            :data="data" 
            id-key="id"
            name-key="name"
            v-model="model" 
			@change="onChange"
            ></su-select>
    </div>
</template>

<script>
export default {
    components: {
        SuSelect
    },
    data() {
        return {
            data: [
                {id: "01", name: "label01"},
                {id: "02", name: "label02"},
                {id: "03", name: "label03"}
            ],
            model: "01",
        }
    },
    methods: {
        onChange(val){
            console.log("数据变化：",val);    
        }
    }
}
</script>
```
:::
## 模式1-复选

:::demo
```html
<template>
    <div>
        {{ model }}
        <su-select 
            :data="data" 
            multiple
            value-key="id1"
            id-key="id"
            name-key="name"
            v-model="model" 
            ></su-select>
    </div>
</template>

<script>
export default {
    components: {
        SuSelect
    },
    data() {
        return {
            data: [
                {id: "01", name: "label01"},
                {id: "02", name: "label02"},
                {id: {id1:1}, name: "label03"}
            ],
            model: ["01"],
        }
    },
    methods: {}
}
</script>
```
:::
## 模式2-单选

:::demo
```html
<template>
    <div>
        {{ model }}
        <su-select 
            :data="data" 
            v-model="model" 
            :auto-please="false"
            ></su-select>
    </div>
</template>

<script>
export default {
    components: {
        SuSelect
    },
    data() {
        return {
            data: {
                "01": "label01",
                "02": "label02",
                "03": "label03"
            },
            model: "01",
        }
    },
    methods: {}
}
</script>
```
:::
## 模式2-复选

:::demo
```html
<template>
    <div>
        {{ model }}
        <su-select 
            :data="data" 
            multiple
            v-model="model" 
            ></su-select>
    </div>
</template>

<script>
export default {
    components: {
        SuSelect
    },
    data() {
        return {
            data: {
                "01": "label01",
                "02": "label02",
                "03": "label03"
            },
            model: ["01"],
        }
    },
    methods: {}
}
</script>
```
:::


### Attributes
| 参数      | 说明          | 类型      | 默认值  |
|---------- |-------------- |---------- |-------- |
| data     |  要显示的数据           | array|Object |  — |
| v-model    | 选中的值          | -- | — |
| name | 复选框的文字提示 | string |  — |
| id-key | data为list时的item的id的key | - | — |
| name-key | data为list时的item的name的key | - | — |
| autoPlease | 没有请选择/全部选项 | Boolean | false |