表单切换 数据保存

2021-06-16  本文已影响0人  Pluto_7a23
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
努力学习中!!!!争取月入过万!!!!

上一篇下一篇

猜你喜欢

热点阅读