vue-前端动态增加和删除行

只有一行时，显示增加，点击增加会出现第二行， 第一行不能删除；其他行都可删除

 

 

<el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="120px">
          <div v-for="(item, index) in form.courseType" :key="index">
            <el-form-item label="学段" :prop="'courseType.' + index + '.catagory'">
              <el-select v-model="item.catagory" placeholder="请选择学段">
                <el-option label="小学" :value="87" />
                <el-option label="初中" :value="73" />
                <el-option label="高中" :value="65" />
                <el-option label="测试" :value="30" />
              </el-select>
            </el-form-item>
            <el-form-item label="科目" :prop="'courseType.' + index + '.subcatagory'">
              <el-select v-model="item.subcatagory" placeholder="请选择科目">
                <el-option label="语文" :value="51" />
                <el-option label="数学" :value="52" />
                <el-option label="英语" :value="56" />
                <el-option label="政治" :value="60" />
                <el-option label="历史" :value="59" />
                <el-option label="生物" :value="30" />
                <el-option label="化学" :value="58" />
                <el-option label="物理" :value="57" />
              </el-select>
            </el-form-item>
            <el-form-item
              label="数量"
              :prop="'courseType.' + index + '.amount'"
            >
              <el-input v-model.number="item.amount" type="number" />
            </el-form-item>
            <el-form-item>
              <el-button v-if="index+1 == form.courseType.length" type="primary" @click="addItem">增加</el-button>
              <el-button v-if="index !== 0" type="danger" @click="deleteItem(item, index)">删除</el-button>
            </el-form-item>
          </div>
        </el-form>

　方法实现：

methods: {
    addItem() {
      this.form.courseType.push({
        catagory: '',
        subcatagory: '',
        amount: ''
      })
    },
    deleteItem(item, index) {
      this.form.courseType.splice(index, 1)
      console.log(this.form.courseType, '删除')
    }
  }
}

　参数：

data() {
    return {
      form: {
        courseType: [
          {
            catagory: 73,
            subcatagory: 51,
            amount: 1
          }
        ]
      }
    }
  },