<template>
? <div>
? ? <ul v-for="(item , index) in list" :key="index">
? ? ? <li>
? ? ? ? {{item.serial}}---
? ? ? ? <button @click="remove(index)">刪除</button>
? ? ? </li>
? ? </ul>
? ? <input type="text" v-model="serial" />
? ? <input type="button" value="點(diǎn)擊添加" @click="getserial" />
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? list: [
? ? ? ? { serial: 1 },
? ? ? ? { serial: 2 },
? ? ? ? { serial: 3 },
? ? ? ? { serial: 4 },
? ? ? ? { serial: 5 }
? ? ? ],
? ? ? serial: ""
? ? };
? },
? methods: {
? ? getserial() {
? ? ? this.list.push({
? ? ? ? serial: this.serial
? ? ? });
? ? ? this.serial = "";
? ? },
? ? //通過索引刪除數(shù)組
? ? remove(index) {
? ? ? //splice 操作數(shù)組的方法
? ? ? this.list.splice(index, 1);
? ? }
? }
};
</script>
?
<style>
</style>

<template>
? <el-main>
? ? <el-col :span="24" class="warp-main" v-loading="">
? ? ? <el-form :inline="true" class="demo-form-inline" v-for="(item, i) in FormArr" :key="i">
? ? ? ? <el-form-item label="樣例">
? ? ? ? ? <el-input v-model="item.value"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <el-button type="primary" @click="Delete(item.index)">刪除</el-button>
? ? ? </el-form>
? ? ? <el-button type="primary" @click="AddForm">增加更多</el-button>
? ? </el-col>
? </el-main>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? FormArr: [
? ? ? ? {
? ? ? ? ? index: 0,
? ? ? ? ? value: ''
? ? ? ? }
? ? ? ]
? ? }
? },
? methods: {
? ? AddForm () {
? ? ? this.FormArr.push({
? ? ? ? index: this.FormArr.length,
? ? ? ? value: ''
? ? ? })
? ? ? console.log(this.FormArr)
? ? },
? ? Delete (index) {
? ? ? this.FormArr.splice(index, 1)
? ? ? for (let i in this.FormArr) {
? ? ? ? this.FormArr[i].index = i
? ? ? }
? ? }
? }
}
</script>