uni-app 自定义表单

最新推荐文章于 2024-05-27 16:45:39 发布
最新推荐文章于 2024-05-27 16:45:39 发布
阅读量1k 收藏
点赞数
分类专栏： uni-app 文章标签： uni-app 前端 vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Edwin_jade/article/details/128713983
版权

主组件：

<formPage :urlApi="formUrl" :type="formType" :mer_id="item.mer_id" :json="formJson" @saveFromData="saveFromData"></formPage>

参数：

                mer_id: 0,
                formUrl: '*****', // 表单api请求地址
                formType: true,
                fromJson: '', // {"cartId":{"75":[722636],"76":[124541]}}
                fromDataSub: {} ,//提交对象 最后将其转换为json字符串

方法：

        authFromData(data){
                if(typeof data == "object" && data.question_id && data.data.length > 0){
                    try{
                        data.data.forEach((item, index)=> {
                            if(item.required == "required" || item.required == true){
                                if (typeof item.use == 'object'){
                                    if(item.use != undefined && item.use.length > 0){
                                        
                                    }else {
                                        throw new Error("退出循环");
                                    }
                                } else {
                                    if(item.use == ''){
                                        throw new Error("退出循环");
                                    }
                                }
                            }
                        })
                    }catch(e){
                        // 出现异常
                        return false
                    }
                    
                }else {
                    return false
                }
                return true
            },
            // 表单数据提交参数
            saveFromData(data){
                console.log(data, '接收数据')
                // 传输数据当form提交中
                this.fromDataSub = data;
            },

子组件： form 表单

<template>
    <view v-if="type" class="content-from">
        <view class="forData">
            <view class="from" v-for="(item, index) in fromData" :key="index">
                <view v-if="item.type == 'text'" class="input">
                    <view class="title"><span class="require" v-if="item.required">*</span>{{item.key}}</view>
                    <view class="text">
                        <!--  @blur="inputFrom(e, index)" -->
                        <input type="text" v-model="fromData[index].use" @blur="mountedBlur">
                    </view>
                </view>
                <view v-if="item.type == 'select'" class="select">
                    <view class="item">
                        <view class="title"><span class="require" v-if="item.required">*</span>{{item.key}}</view>
                        <view class="option" @click.stop="showSelectClick">{{fromData[index].use !='' ?fromData[index].use:'请选择'}}</view>
                    </view>
                    <view class="seletcList" v-if="showSelect">
                        <view class="select-item" v-if="li" v-for="(li, selectKey) in item.value" :key="selectKey">
                            <view class="rideo" :class="(fromData[index].use != undefined && fromData[index].use == li)?'rideoSelect':''" @click="selectFrom(li, index, item)"></view>
                            <view class="itemLi"  @click.stop="selectFrom(li, index, item)">
                                {{li}}
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="item.type == 'redio'" class="redio">
                    <view class="title"><span class="require" v-if="item.required">*</span>{{item.key}}</view>
                    <view class="redioList">
                        <view class="item" v-if="redio" v-for="(redio, indexRe) in item.value" :key="indexRe">
                            <view class="rideo" :class="(fromData[index].use != undefined && fromData[index].use == redio)?'rideoSelect':''" @click="redioFrom(redio, index, item)"></view>
                            <view class="itemLi" @click.stop="redioFrom(redio, index, item)" >{{redio}}</view>
                        </view>
                    </view>
                </view>
                <view class="checkbox" v-if="item.type == 'checkbox'">
                    <view class="title"><span class="require" v-if="item.required">*</span>{{item.key}}</view>
                    <view class="checkboxList">
                        <view class="item" v-if="checkbox" v-for="(checkbox, checkboxRe) in item.value" :key="checkboxRe">
                            <view class="rideo" :class="(fromData[index].use != undefined && fromData[index].use.length >0 && fromData[index].use.indexOf(checkbox) !== -1)?'rideoSelect':''"  @click="checkboxFrom(checkbox, index, item)"></view>
                            <view class="itemLi" @click.stop="checkboxFrom(checkbox, index, item)" >{{checkbox}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
    <!-- 页面获取当前需要显示的表单数据 从目标也跳转到当前页面 并且将请求地址发送过来 -->
<script>
    import { getListFrom } from '@/api/dept_auth.js';
    export default {
        props: {
            urlApi: {
                type: String,
                default: ''
            },
            type: { // 显示状态
                type: Boolean,
                default: false
            },
            mer_id: {
                type:String,
                default: ''
            },
            json: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                fromData: {},
                SubmitData: {},
                showSelect: false,
                parme: 0,// 用于数据监听切换作用 参数值并无任何其他效果
            }
        },
        watch: {
            mer_id:  {
                handler(nVal,oVal){
                    console.log(nVal,"我现在是在请求表单数据")
                    
                }
            },
        },
        mounted() {
            this.urlApi = this.urlApi;
            console.log(this.json,"我先请求一下")
            this.getFromDataPage()
        },
        methods: {
            // inputFrom(e, index){
            //     let text = e.default
            //     this.fromData.index['use'] = text;
            // },
            mountedBlur(){
                this.parme += 1;
                this.synData()
            },
            // 点击select之后将其数据放入到提交数据中
            selectFrom(li, index, item){
                // 选中项使用use 表示当前使用的值
                this.fromData[index].use = li;
                this.parme += 1;
                this.showSelectClick();
                this.synData()
            },
            redioFrom(li, index, item){
                this.fromData[index].use = li;
                this.parme += 1;
                this.synData()
            },
            checkboxFrom(li, index, item){
                if(this.fromData[index].use != undefined && this.fromData[index].use.length > 0){
                    let UseIndex = this.fromData[index].use.indexOf(li);
                    if(UseIndex === -1){
                        this.fromData[index].use.push(li);
                    }else {
                        this.fromData[index].use.splice(UseIndex, 1);
                    }
                }else {
                    this.fromData[index].use = [li];
                }
                this.parme += 1;
                this.synData()
                console.log(this.fromData)
            },
            showSelectClick(){
                this.showSelect = !this.showSelect
                this.parme += 1;
            },
            getFromDataPage(){
                getListFrom(this.urlApi, this.json).then(res => {
                    if(this.mer_id){
                        let param = res.data[this.mer_id]
                        if(typeof param == 'object'){
                            this.fromData = param.data;
                            this.SubmitData = param
                        }else {
                            this.SubmitData = JSON.parse(param)
                            this.fromData = JSON.parse(param).data;
                        }
                        // 处理数据
                        this.fromData.forEach((item, index)=>{
                            if(item.value && item.value.indexOf(";")!== -1){
                                this.fromData[index].value = item.value.split(";"); // 将其变成数组类型
                                this.fromData[index].use = [];
                            }else{
                                this.fromData[index].use = '';
                            }
                        }) 
                        console.log(this.fromData, "初始数据")
                    }else {
                        this.type = false;
                        this.fromData = {};
                    }
                }).catch(err=> {
                    console.log("请求失败");
                })
            },
            // 同步数据
            synData(){
                this.SubmitData.data = this.fromData
                this.$emit("saveFromData", this.SubmitData);
            }
        }
            
    }
</script>
    
<style lang="scss">
    .content-from{
        background-color: #fff;
        padding: 0 20rpx;
        margin-bottom: 10rpx;
        .forData{
            padding: 0 20rpx;
            .from {
                padding: 20rpx 0;
                .input{  // 上下排列
                    display: flex;
                    justify-content: left;
                    width: 100%;
                    align-items: left;
                    flex-wrap: wrap; // 允许换行
                    .title{
                        height: 2rem;
                        display: block;
                        width: 100%;
                        font-size: 32rpx;
                        .require{
                            color: red;
                        }
                    }
                    .text{
                        width: 100%;
                        height: 2rem;
                        font-size: 32rpx;
                        input{
                            height: 1.5rem;
                            display: block;
                            width: 100%;
                            background-color: #fff;
                            border-radius: 5rpx;
                            border: 1rpx solid #d4d4d4;
                            padding-left: 10rpx;
                        }
                    }
                }
                .select {
                    width: 100%;
                    position: relative;
                    .item{
                        display: flex;
                        height: 2rem;
                        justify-content: space-between;
                        align-items: left;
                        .title{
                            flex: 50%;
                            font-size: 32rpx;
                            .require{
                                color: red;
                            }
                        }
                        .option{
                            flex: 50%;
                            font-size: 32rpx;
                            color: #ababab;
                            text-align: right;
                            padding-right: 20rpx;
                        }
                    }
                    .seletcList{
                        display: flex;
                        position: absolute;
                        top: 2rem;
                        left: 0;
                        height: auto;
                        background-color: #fff;
                        border-radius: 5rpx;
                        width: 100%;
                        z-index: 10;
                        flex-wrap: wrap;
                        padding: 20rpx;
                        .select-item{
                            width: 100%;
                            height: 2rem;
                            background-color: #fff;
                            color: #222;
                            display: flex;
                            justify-content: left;
                            align-items: center;
                            .rideo{
                                margin: 5rpx;
                                padding: 5rpx;
                                width: 30rpx;
                                height: 30rpx;
                                border-radius: 50%;
                                background-color: #fff;
                                border: 1rpx solid #d4d4d4;
                            }
                            .rideoSelect{
                                background-color: red !important;
                                border: 1rpx solid red !important;
                            }
                            .itemLi{
                                flex: auto;
                                font-size: 32rpx;
                                color: #222;
                                text-indent: 0.5rem;
                            }
                            .bgSelect{
                                background-color: #ff9b43;
                                color: #fff;
                            }
                        }
                    }
                }
                .redio{
                    width: 100%;
                    display: flex;
                    justify-content: left;
                    flex-wrap: wrap;
                    align-items: left;
                    position: relative;
                    .title{
                        width: 100%;
                        font-size: 32rpx;
                        .require{
                            color: red;
                        }
                    }
                    .redioList{
                        width: 100%;
                        .item{
                            width: 100%;
                            display: flex;
                            justify-content: left;
                            align-items: center;
                            flex-wrap: wrap;
                            .rideo{
                                margin: 5rpx;
                                padding: 5rpx;
                                width: 30rpx;
                                height: 30rpx;
                                border-radius: 50%;
                                background-color: #fff;
                                border: 1rpx solid #d4d4d4;
                            }
                            .rideoSelect{
                                background-color: red !important;
                                border: 1rpx solid red !important;
                            }
                            .itemLi{
                                flex: auto;
                                font-size: 32rpx;
                                color: #222;
                                text-indent: 0.5rem;
                            }
                        }
                    }
                }
                .checkbox{
                    width: 100%;
                    display: flex;
                    justify-content: left;
                    flex-wrap: wrap;
                    align-items: left;
                    position: relative;
                    .title{
                        width: 100%;
                        font-size: 32rpx;
                        .require{
                            color: red;
                        }
                    }
                    .checkboxList{
                        width: 100%;
                        .item{
                            width: 100%;
                            display: flex;
                            justify-content: left;
                            align-items: center;
                            flex-wrap: wrap;
                            .rideo{
                                margin: 5rpx;
                                padding: 5rpx;
                                width: 30rpx;
                                height: 30rpx;
                                border-radius: 5rpx;
                                background-color: #fff;
                                border: 1rpx solid #d4d4d4;
                            }
                            .rideoSelect{
                                background-color: red !important;
                                border: 1rpx solid red !important;
                            }
                            .itemLi{
                                flex: auto;
                                font-size: 32rpx;
                                color: #222;
                                text-indent: 0.5rem;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
Edwin_jada
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Vue uni-app自定义列表表格信息展示可用于商品规格参数展示
chenchuang0128的博客
06-21 1938
前端Vue自定义列表表格信息展示可用于商品规格参数展示， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13131 效果图如下： #### 使用方法 ```使用方法 <!-- table-list:表格数组 数组里对象可自定义字段 --> <cc-defineTable :table-list="tableArr"></cc-defineTable> ``` #### HTM
《uni-app》表单组件-form表单
热门推荐
Oliver尹的博客
09-21 1万+
From，表单组件，具有数据收集、提交数据的功能，某种程度上说它就是一个容器，这个容器内部可以有 input 、checkbox、radio 、picker 等组件填充，原则上所有的表单组件都必须置入from组件，再通过form组件收集内部组件数据并将内容通过接口发送至后台接收～
如何使用UniApp编写简单成绩表
最新发布
2301_78163093的博客
05-27 173
你可以使用uni-app提供的表格组件来实现。在页面中创建一个表格，可以使用uni-app提供的table组件来实现。表格包括以下数据：学生姓名、语文成绩、数学成绩、英语成绩、总分、平均分。在页面中定义一个数组，用于存储学生的成绩数据。使用v-for指令来循环渲染表格，将数据逐一显示在表格中。添加一个按钮，用于导出成绩表，可以使用uni-app提供的导出功能来实现。以上代码定义了一个简单的成绩表，包括姓名、科目和成绩三个字段。运行代码后，将显示一个包含学生成绩的表格。数组，用于存储学生的成绩数据。
uniapp 简单表单布局1
盖世小可爱的博客
07-29 3320
uniapp表单
uniapp实现表单验证
qq_53897534的博客
08-17 3860
uniapp实现表单验证，密码可见与不可见
uniapp制作app与小程序前端——list表单配置
hk_hkl的博客
05-11 1078
手把手玩转uniapp前端No.7
uniapp、微信小程序--自定义table（2）
lingrer的博客
12-11 522
按照之前使用display：table书写的表格 在ios系统上面会出现背景颜色渐变的样式不对。最后使用display：flex来布局。
uni-app
02-22
uni-app的组件库还包括列表、按钮、图片、表单等常见的UI元素，以及各种交互效果，使得开发者能够快速地搭建出符合设计稿的应用界面。 uni-app的跨平台能力得益于其基于Vue.js的语法体系，这使得熟悉Vue的开发者...
uni-app.zip
12-09
2.2 组件化开发：uni-app提供了一系列基础组件，如布局、表单、媒体、导航等，同时支持自定义组件，便于复用和扩展。 2.3 事件处理：uni-app遵循Vue.js的事件绑定方式，使开发者能轻松处理各种用户交互。 2.4 网络...
基于uni-app框架的登录模板
02-21
2. uni-app的架构：基于Vue的声明式编程，支持自定义组件，具备Vue的特性如计算属性、侦听器、指令等；同时，针对原生APP提供了原生插件接口，增强性能和用户体验。 二、登录模板详解 1. 页面结构：登录模板通常...
Uni-App模块化开发的组件封装
12-31
在Uni-App中，组件同样扮演着这样的角色，开发者可以创建一个独立、可复用的代码块，如按钮、表单、轮播图等。 2. 模块化：模块化是将复杂系统拆分成更小、更易管理的部分，每个部分称为模块。在JavaScript中，ES6...
uniapp 表单（input、radio、picker）提交获取参数值
YL
07-08 8378
在使用uniapp开发页面的时候，经常会用到表单，今天第一次用uniapp写表单，记录下当点击提交的时候input、radio、picker如何获取参数值的。 获取参数值，首先要进行数据绑定v-model，然后定义个对象 （saveData），将数据保存到里面。 input <input type="text" value="" placeholder-style="color:#999;font-size:14px; letter-spacing: 2px;" v-model="saveDat
uniapp表单校验和提交
weixin_43453621的博客
07-25 6226
用到u-viewui框架（推荐，因为确实好看），明显已经校验并提交到服务器，得到数据返回。
探究Uniapp在移动端开发中的应用
用心创作每一篇文章
05-27 1036
Uniapp是一款基于Vue.js框架的跨平台开发工具，可以同时开发iOS、Android、H5、小程序等多个平台的应用。Uniapp的特点在于，它可以使用一套代码，同时生成多个平台的应用，大大提高了开发效率和开发成本。Uniapp作为一款跨平台开发工具，具有很多优势和应用场景。通过使用Uniapp，可以快速开发出适用于多个平台的应用，提高了开发效率和开发成本。未来，Uniapp将会不断完善和优化，为开发者们提供更好的开发体验和开发效率。
uni-app封装手机端table组件
qq_36566924的博客
05-11 969
column：显示的字段 eg：[{ prop: 'businessType',label: '业务类型'}]IMG_BASE_URL是我的项目图片的基础地址，主要是放置下拉的那个箭头，根据自己项目去调整。tableData：table数据 eg:[{businessType:'1111'}]outerNum:table的header显示几个，默认3个。funcBtn:操作按钮的名称数组，eg：['审核']loadMoreData：点击加载更多的处理事件。一.最终实现效果如下。
uniapp如何进行表单验证
wssg1206的博客
10-09 1524
uni-ui。
uniCloud笔记 案例:通过form表单采集并新增到云数据库
weixin_57694163的博客
11-28 903
uniCloud笔记 案例:通过form表单采集并新增到云数据库
uniapp组件-uni-forms表单案例
jxzdezhanhao的博客
03-22 7716
代码实现： <template> <view> <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext"> <uni-group title="基本信息" top="0"> <uni-forms-item name="name" required label="用户名"&gt..
uni-app 实现一下自定义表单 类型包括输入框 单选按钮
06-09
好的，我可以帮你解答这个问题。 首先，你可以使用uni-app提供的组件来实现自定义表单。输入框可以使用`<input>`组件，单选按钮可以使用`<radio>`组件。 在实现自定义表单之前，你需要先确定你的表单需要哪些字段，例如表单名称、表单类型、表单值等等。然后，你可以定义一个`form`对象来保存这些字段： ```javascript data() { return { form: { name: '', type: '', value: '' } } } ``` 接着，你可以在页面中渲染这些表单字段，例如： ```html <template> <view> <form> <input type="text" v-model="form.name" placeholder="请输入名称"></input> <radio-group v-model="form.type"> <radio value="input">输入框</radio> <radio value="radio">单选按钮</radio> </radio-group> <input v-if="form.type === 'input'" type="text" v-model="form.value" placeholder="请输入内容"></input> <radio-group v-if="form.type === 'radio'" v-model="form.value"> <radio value="option1">选项1</radio> <radio value="option2">选项2</radio> <radio value="option3">选项3</radio> </radio-group> </form> </view> </template> ``` 在上面的代码中，我们使用了`v-model`指令来实现双向数据绑定，使得表单字段的值与`form`对象中对应的属性值保持同步。同时，我们使用了`v-if`指令来根据表单类型动态渲染表单字段。 最后，你可以在提交表单时获取`form`对象中的值，进行后续处理： ```javascript methods: { submitForm() { console.log(this.form); // 进行表单提交等后续处理 } } ``` 以上就是使用uni-app实现自定义表单的示例代码。希望能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值