美文网首页
表单切换 数据保存

表单切换 数据保存

作者: Pluto_7a23 | 来源:发表于2021-06-16 14:04 被阅读0次
    1111.png

    想要点击不同的tab切换提交信息,然后点击回到对应的tab是保存记录

    <div class="btn_list">
    //这个是循环上边的tab切换
                    <span :class="['genre',now == item.id ? 'cur' : '']" v-for="(item,index) in CarClassIf" :key="item.id" @click="changHan(item,index)" >{{item.name}}
                    </span> 
                </div>
                <div class="table" >
                    //循环的表单信息
                    <van-row gutter="20" class="table_row" v-for="(item, index) in list[now]" :key="index" >
                        
                        <van-col span="6" class="table_row_col1">
                            <input class="input_van" v-model="item.name"  placeholder="拆车件名称"/>
                        </van-col>
                        <van-col span="6" class="table_row_col2">
                            <input type="number" v-model="item.num" class="input_van"  placeholder="拆车件数量"/>
                        </van-col>
                        <van-col span="12" class="table_row_col3">
                            <van-icon name="cross" class="cha" @click="coldes(item,index)" />
                            <van-radio-group class="table_col_radio" v-model="item.isDestroy" direction="horizontal">
                                <van-radio :name='Number(0)'>未破损</van-radio>
                                <van-radio :name='Number(1)'>已破损</van-radio>
                            </van-radio-group>
                        </van-col>
                    </van-row>
                    <div class="icon"> 
                        <van-icon @click="addList" name="plus" />
                    </div>
    

    然后在切换tab的时候 click事件中

    changHan(item,index){
            this.now = item.id
            //获得当前点击的id是多少
    }
    

    在调用接口的时候 获取 tab的数据
    然后循环已他的id为key

    this.CarClassIf.forEach(i => {
                   this.$set(this.list,i.id,[])//将ID设置为key,value是空数组方便点击加号的时候push
          });
    
    qiqiqi.png

    上面这个样子

    点击数组里面的 “+”的时候需要给list里面push 数据

     let cope = {
         name:'',//名称
         num:'',//数量
         isDestroy:0,//单选按钮
     };
     this.list[this.now].push(cope);//push到对应的ID里面
    

    可能有点顺序不对,大致就是这样 给list对象添加key跟value
    努力学习中!!!!争取月入过万!!!!

    相关文章

      网友评论

          本文标题:表单切换 数据保存

          本文链接:https://www.haomeiwen.com/subject/odgqeltx.html