朋友有個需求，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>
所實現的效果：
