@58fe/p5/src/doc/select.md

pc端vue组件

<script>
	module.exports = {
		methods: {
			select(con) {
                console.log(con);
            }
        },
		data() {
			return {
                listArray: ['北京', '上海', '南京', '深圳', '广西'],
                list: [
                    { vals: '1', labels: '北京' },
                    { vals: '2', labels: '上海' },
                    { vals: '3', labels: '南京' },
					{ vals: '4', labels: '深圳' },
                    { vals: '5', labels: '广西' }
                ],
				listEmpty: []
            };
		}
	}
</script>

## Select 选择器

### 引入

```javascript
import { select } from '@58fe/p5';
```
引用的组件使用过程中，可以加前缀`p5-`进行使用，`p5-select`

### 基本用法
引用的组件使用过程中，为防止命名问题，可以加前缀`p5-`进行使用
:::demo 支持各种数组对象，数组形式的数据，数据对象时，`val-name` `label-name`为必填项

```html
<p5-select  v-on:select=select val-name='vals' label-name='labels'  :list="list" :title=true  :is-placeholder=false></p5-select>

<p5-select  v-on:select=select :list="listArray" :is-can-empty=true></p5-select>

<script>
export default {
	methods: {
		select(con) {
			console.log(con);
		}
	},
	data() {
		return {
            list: [
                { vals: '1', labels: '北京' },
				{ vals: '2', labels: '上海' },
				{ vals: '3', labels: '南京' },
				{ vals: '4', labels: '深圳' },
				{ vals: '5', labels: '广西' }
            ]
		};
	}
};
</script>
```

:::

### 传入纯数组

:::demo 

```html

<p5-select  v-on:select=select :list="listArray"></p5-select>

<script>
export default {
	methods: {
		select(con) {
			console.log(con);
		}
	},
	data() {
		return {
			listArray: ['北京', '上海', '南京', '深圳', '广西']
		};
	}
};
</script>
```

:::

### 空列表

:::demo 

```html
<p5-select  v-on:select=select :list="listEmpty"></p5-select>

<script>
export default {
	methods: {
		select(con) {
			console.log(con);
		}
	},
	data() {
		return {
            listEmpty: []
		};
	}
};
</script>
```

:::

### 传入默认选项

:::demo
```html
<p5-select :list="list" :set-default-head="list[2]" val-name='vals' label-name='labels'></p5-select>

<script>
export default {
	data() {
		return {
            list: [
                	{ vals: '1', labels: '北京' },
                    { vals: '2', labels: '上海' },
                    { vals: '3', labels: '南京' },
                    { vals: '4', labels: '深圳' },
                    { vals: '5', labels: '广西' }
            ]
		};
	}
};
</script>
```

:::

### 参数

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| list         | 数据列表       | Array/Array[Object] | ——           | []      |
| othClassName | 附加样式       | String              | ——           | default |
| valName      | 数据对象的值名 | String/标签         | —— | default |
| labelName    | 数据对象的值名 | String/标签         | —— | default |
| select       | 回调方法       | String/标签         | —— | default |
| isPlaceholder | 是否使用占位文字      | Boolean         | true/false | true |
| placeholderText  | 占用文案   | String             | —— | 请选择 |
| noDataText   | 没有数据文案    | String             | —— | 无数据 |
| isCanEmpty   | 是否可以清空    | Boolean            | true/false   | false |
| setDefaultHead   | 设置默认选项  | Object/String    | ——           | ——    |