You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
4.8 KiB
134 lines
4.8 KiB
1 year ago
|
# 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条数据"]) |
|
||
|
|
|