vue 常用的数组 添加push和删除splice

<template>
  <div class="content">
    <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
      <a-form-item label="电梯编号" required>
        <a-input v-model="formItem.elevator_no" style="width: 80%" />
      </a-form-item>
      <a-form-item label="单元名称" required>
        <a-input v-model="formItem.name" style="width: 80%" />
      </a-form-item>
      <a-form-item label="设备ID" required v-for="(item, index) in formItem.number" :key="index">
        <div class="add">
          <div class="indexText" v-if="index !== 0">{{ index + 1 }}</div>
          <div style="width: 80%">
            <div>
              <a-input v-model="item.name" addon-before="电梯名称" />
            </div>
            <div>
              <a-input v-model="item.id" addon-before="蓝牙设备ID" />
            </div>
          </div>
          <div
            @click="addItem(item, index)"
            v-if="index + 1 == formItem.number.length"
            class="add_minus"
          >
            <a-icon type="plus-circle" :style="{ fontSize: '23px', color: '#999' }" />
          </div>
          <div v-if="index !== 0" @click="deleteItem(item, index)" class="add_minus">
            <a-icon type="minus-circle" :style="{ fontSize: '23px', color: '#999' }" />
          </div>
        </div>
      </a-form-item>

      <a-form-item label="控制楼层" required>
        <a-input v-model="floor" style="width: 80%" />
        <h6 style="width: 80%">
          硬件设备实际连接的楼层,如控制1层,控制4,5,6,7,8层,控制15层,填写方式为(1,4-8,15
          ),逗号使用英文格式。
        </h6>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 1 }" style="margin-top: 200px">
        <a-button @click="saveFn" type="primary" style="margin-right: 20px"> 保存 </a-button>
        <a-button @click="cancelFn"> 取消 </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
 

export default {
  data() {
    return {
      formItem: { 
        number: [{ name: "", id: "" }], 
      },  
    };
  }, 
  methods: {
    addItem() {
      this.formItem.number.push({ name: "", id: "" });
    },
    deleteItem(item, index) {
      this.formItem.number.splice(index, 1);
    },
    
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 20px;
  background-color: #fff;
}
.add {
  display: flex;
  align-items: center;
  .add_minus {
    margin-left: 30px;
    cursor: pointer;
  }
}

.indexText {
  width: 30px;
  height: 30px;
  background-color: #eee;
  text-align: center;
  line-height: 30px;
  margin-right: 10px;
  border-radius: 50%;
}
</style>