# wz-select-input

## 示例

```vue
<template>
	<view class="content">
		单选：（直接传入dataList）
		<wz-select-input ref="radioSelectInput" v-model="dataForm.radio" :data-list="radioDataList"
			@select="selectData">
		</wz-select-input>

		<view class="" style="margin-top: 16px;">
			多选：(模拟后端请求数据)
			<wz-select-input ref="checkboxSelectInput" v-model="dataForm.checkbox" mode="checkbox" :proxyConfig="{
				reqFun: reqGetList,
				localPaging: false 
			}" @select="selectData">
			</wz-select-input>
		</view>
	</view>
</template>

<script>
	import {
		simulationReqGetList,
		getDataList
	} from "@/common/mock.js"
	export default {
		data() {
			return {
				radioDataList: [],
				dataForm: {
					radio: '',
					checkbox: []
				}
			}
		},
		watch: {
			dataForm: {
				handler(newVal) {
					console.log(newVal)
				},
				deep: true
			}
		},
		onLoad() {
			this.getDataList()
		},
		onReady() {
			// this.dataForm.checkbox = ["0-1", "1-2", "3-4"]

			//多选模式下 如果是编辑表单的情况下需要手动设置name
			// this.$refs.checkboxSelectInput.setName(["第1条数据", "第2条数据", "第4条数据"])
		},
		methods: {
			selectData(mode, data) {
				console.log(data)
			},
			reqGetList(data) {
				return simulationReqGetList({
					pageIndex: data.pageIndex,
					pageSize: data.pageSize,
					name: data.searchValue
				})
			},
			getDataList() {
				this.radioDataList = getDataList()
			}
		},
		
	}
</script>

<style>
	.content {
		padding: 16px;
	}
</style>
```



## 属性props

| 属性        | 类型                  | 默认值                                        | 说明                                                         |
| ----------- | --------------------- | --------------------------------------------- | ------------------------------------------------------------ |
| v-model     | String\|Number\|Array |                                               | 选中的value                                                  |
| mode        | String                | radio                                         | radio单选\|checkbox多选                                      |
| dataList    | Array\|null           | null                                          | 如果dataList传入了数组则直接使用传入的数组渲染，无需再配置proxyConfig |
| proxyConfig | Object                | reqFun: function() {},<br/>localPaging: false | [proxyConfig](#proxyConfig的属性)                            |
| page        | Object                | pageIndex: 1, <br/>pageSize: 20               | [page](#page的属性)                                          |
| fields      | Object                | label: 'name',<br/>value: 'code'              | [fields](#fields的属性)                                      |
| searchType  | String                | local                                         | 搜索的类型,local本地搜索, remote向服务器请求。只有使用proxyConfig.reqFun请求才能配置为remote |
| placeholder | String                | 请选择                                        | 未选择时的占位文字                                           |

### proxyConfig的属性

| 属性        | 类型     | 默认值        | 说明                                                         |
| ----------- | -------- | ------------- | ------------------------------------------------------------ |
| reqFun      | Function | function() {} | 向后端发起请求的函数。({pageIndex,pageSize,searchValue})=>{} |
| localPaging | Boolean  | false         | 是否前端本地分页,如果使用的是dataList默认是本地分页          |

### page的属性

| 属性      | 类型   | 默认值 | 说明   |
| --------- | ------ | ------ | ------ |
| pageIndex | Number | 1      | 当前页 |
| pageSize  | Number | 20     | 页大小 |

### fields的属性

| 属性  | 类型   | 默认值 | 说明         |
| ----- | ------ | ------ | ------------ |
| label | String | name   | 显示的字段名 |
| value | String | code   | 取值的字段名 |



## 事件event

| 名称   | 参数            | 说明                                                         |
| ------ | --------------- | ------------------------------------------------------------ |
| select | (mode,data)=>{} | mode:radio\|checkbox<br/>mode等于radio时：(mode,{check,name,code})=>{}<br/>mode等于checkbox时：(mode,{names,values,origin})=>{} |



## 方法methods

| 名称    | 参数 | 返回值 | 说明                                                         |
| ------- | ---- | ------ | ------------------------------------------------------------ |
| setName | []   | void   | 多选模式下,如果是编辑表单的情况,需要手动设置name<br/>this.$refs.checkboxSelectInput.setName(["第1条数据", "第2条数据", "第4条数据"]) |