关于vue中新增一组表单_vue 表单填完后需要添加新一个表单

作者：Cpp五条 | 2024-03-15 15:04:59

踩

vue 表单填完后需要添加新一个表单

朋友有个需求，vue中。点击新增，会新增一组表单。帮她写了一下。直接上代码吧。自我感觉注释的清清楚楚。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DEMO</title>
    <script src="../../js/vue.js"></script>    <!--引用vue-->
    <script src="../../lib/index.js"></script>   <!--引用elementJs-->
    <link rel="stylesheet" href="../../lib/index.css">  <!--引用element css -->

</head>
<body>
<div id="root">


    <div style="margin-top: 50px">



        <!--注意注意注意    你这一块所有的数据都是从data中的memberSelect中取的  在这循环之后   所有的数据是从  partyNum 取的 -->
        <div v-for="(partyNum,index) in memberSelect">     <!--这里是循环-->
            <br>
            <br>
            <template>
                select:
                <el-select v-model="partyNum.value" placeholder="请选择" @change="getCenter(index)">    <!--这里是下拉框  对应的是partyNum.value 也就是 data中的memberSelect.value-->
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <br>

                <!--label的值  以及  value的值   也就是两个input框的值   都是在select选择的时候   @change="getCenter(index)"   这个函数中赋值的   -->


                label:
                <el-input v-model="partyNum.name" style="width: 300px"></el-input> <!--这里是第一个input  对应的是partyNum.name 也就是 data中的memberSelect.name--->
                <br>
                value:
                <el-input v-model="partyNum.id" style="width: 300px"></el-input><!--这里是第二个input  对应的是partyNum.id 也就是 data中的memberSelect.id--->
            </template>
            <input type="button" @click="remove(index)" value="删除">
        </div>
        <input type="button" @click="adds" value="新增">

    </div>

    <span>{{memberSelect}}</span>
</div>
</body>
</html>
<script>

    tablevm = new Vue({
        el: "#root",
        data: {
            options: [{      //这里我是给select值写死了
                value: '1',
                label: '写了五行关于火的诗'
            }, {
                value: '2',
                label: '两行烧茶'
            }, {
                value: '3',
                label: '两行留到冬天取暖'
            }, {
                value: '4',
                label: '剩下的一行'
            }, {
                value: '5',
                label: '留给你在停电的晚上读我'
            }],
            memberSelect: [{"value": "", "name": "", "id": ""}]    //这里是你上边所循环的东西
        },

        methods: {

            adds(){

                let datas = {      //这里定义了一个对象
                    "value": "", "name": "", "id": ""
                };
                this.memberSelect.push(datas);   //这里 每次点新增  把定义的这个空的对象   push到memberSelect这个数组中
            },
            getCenter(index){ //这个是你的change函数      //index就是你所操作select的下标   换言之   就是data中memberSelect数组中   你所操作那个对象的下标
                console.log(index);
                var center = ""; //定义一个空来放获取到的所谓的label
                for (var i = 0; i < this.options.length; i++) { //循环判断
                    if (this.options[i].value == this.memberSelect[index].value) {
                        center = this.options[i].label;
                    }
                }
                //这里可以把所谓的label放到你vue实例的某个值中
                console.log(center);
                this.memberSelect[index].name = center;   //这里把下拉框对应的label值放在data中memberSelect数组相对应的下标的对象中
                this.memberSelect[index].id = this.memberSelect[index].value;//这里把下拉框对应的value值放在data中memberSelect数组相对应的下标的对象中
            },
            remove(index){   //这里是删除 index的值跟上边的getCenter函数的index同理
                console.log(index);
                var arr = this.memberSelect;   //这个是你原始的data中的memberSelect数组
                arr.splice(index, 1);   //这里通过下标删除数组中你所需要删除的元素
                this.memberSelect = arr;   //把删除过元素后的数组   更新到data中的memberSelect数组中
            }

        }
    });

</script>



所实现的效果：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/242106