根据uview官网自己组建了一个最常用的表单格式,其中基本元素都有,包括如何渲染到form,官网有一些细节没有提到,在这里给大家总结一下,小白一个。
由于像下拉框,单选,多选这种,提交的value一般都是id的形式,所以这里除了最简单的input其他所提交的值一律用的id形式,因为这种在实际开发中比较常见,具体如何构建成一个完整的form下面会细说,
下面是代码以及示例图
<template>
<view class="">
<view style="height: 200px;"></view>
<u-form :model="form" ref="uForm">
<!-- 正常input ,v-model自动渲染进form,-->
<u-form-item label="简介">
<u-input v-model="form.intro" prop="intro"/>
</u-form-item>
<!-- 多选,其中:name代表返回的val值,需要在js里的checkboxGroupChange进行获取,手动渲染form里 -->
<u-form-item label="水果">
<u-checkbox-group @change="checkboxGroupChange">
<u-checkbox
@change="checkboxChange"
v-model="item.checked"
v-for="(item, index) in list" :key="index"
:name="item.id"
>{{item.name}}</u-checkbox>
</u-checkbox-group>
</u-form-item>
<!-- 下拉框,其中需要有show默认值设为false,点击u-input开启show,u-input中的label代表表单显示的值,
需要手动进行渲染,同时form里的对应需要获取的值也需要手动渲染,需要手动渲染的有两个量-->
<u-form-item label="下拉">
<u-select v-model="show" mode="single-column" :list="list2" @confirm="confirm"></u-select>
<u-input v-model="label" type="select" :border="border" @click="show = true" />
</u-form-item>
<!-- 单选 -->
<u-form-item label="味道">
<u-radio-group v-model="form.radio">
<u-radio v-for="(item, index) in radioList" :key="index" :name="item.id" :disabled="item.disabled">
{{ item.name }}
</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="开关">
<u-switch v-model="form.switchVal"></u-switch>
</u-form-item>
<u-button type="success" @click="submit">表单信息</u-button>
</u-form>
<u-button @click="checkedAll">全选</u-button>
<view>
<u-toast ref="uToast" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
form:{
intro:"",
listcheckbox:[],
selectId:"",
radio:"",
switchVal:false
},
show: false,
show2:false,
border:true,
label:"",
list2: [
{
value: '1',
label: '江'
},
{
value: '2',
label: '湖'
}
],
list: [
{
id:1,
name: '苹果',
checked: false,
disabled: false
},
{
id:2,
name: '香蕉',
checked: false,
disabled: false
},
{
id:3,
name: '橘子',
checked: false,
disabled: false
}
],
radioList: [
{
id:"1",
name: '鲜甜',
disabled: false
},
{
id:"2",
name: '麻辣',
disabled: false
}
],
};
},
methods: {
// 选中某个复选框时,由checkbox时触发
checkboxChange(e) {
// console.log(e);
},
// 选中任一checkbox时,由checkbox-group触发
checkboxGroupChange(e) {
this.form.listcheckbox=e
console.log(this.form.listcheckbox)
},
// 全选
checkedAll() {
this.list.map(val => {
val.checked = true;
})
},
confirm(e) {
this.label=e[0].label
this.form.selectId=e[0].value
console.log(this.form.selectId)
},
submit(){
if(this.form.switchVal){
this.form.switchVal=1
}else{
this.form.switchVal=0
}
this.$refs.uToast.show({
title: JSON.stringify(this.form),
type: 'success',
})
}
}
};
</script>
效果图
1.对于正常u-input来说,没什么好说的,v-model所进行的是与数据进行双向绑定,直接就可以渲染到form中
所对应的就是form中的intro,其实我们要做的就是对form中的数据渲染成我们想要的形式。
2.多选checkbox
其中:name所绑定的其实就是所提交的value值,但是这里由于不是双向绑定的,所以需要在下面的方法中,自己去渲染一下
这里面有个checkboxGroupChange方法,其中参数e就是对应:name的值,所以我们这里只需要让form中的listcheckbox等于e即可。
3.下拉框
对于下拉框来说,data中除了构建之外,一般还需要三个变量,show和label,border可以根据情况设定,
其中需要把show默认值设为false,点击u-input开启show,显示出下拉框,u-input中的label代表表单中所要显示的值,需要手动进行渲染,
同时form里对应的selectId也需要手动去渲染,这里给出了一个@confirm对应method里面的confirm方法,参数e里取第一个数组即可获取对应值,
(注意:这里的话list里面必须是label和value键值对,如果需要对应数据库中的数据的话需要进行修改,官方文档里有说明)
4.单选
单选的话是可以直接通过双向绑定的形式对应form里的具体值,所对应的val为:name所对应的值。
5.开关
开关的话我这里选取的是最简单的方式,v-model可以绑定form中的值,并且在提交的时候,根据是否开关可以去设定自己想要的数据。
这里小白一个,由于官方文档没有具体的demo案例,这是根据官方文档自我总结出来的= =,如果有问题的话可以评论讨论一下。