WZC2/fe/PDA/uni_modules/wz-select-input

wz-select-input

示例

<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() {}, localPaging: false	proxyConfig
page	Object	pageIndex: 1, pageSize: 20	page
fields	Object	label: 'name', value: 'code'	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 mode等于radio时：(mode,{check,name,code})=>{} mode等于checkbox时：(mode,{names,values,origin})=>{}

方法methods

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