后台管理中考卷设置

要实现如下效果：
代码：
<a-form-model-item  :labelCol="{span:3}" :wrapperCol="{span:21}"  label="考卷设置">
  <div v-for="(item,index) in arrData" class="setting_info">
    <div style="display: flex;align-items:center" v-if="arrData[index] != '{}'">
      <span style="margin-right:5px">题型</span>
        <a-select   placeholder="请选择题型" v-model="arrData[index].type" style="width:100px;margin-right:10px">
          <a-select-option  :value="'1'">单选题</a-select-option>
          <a-select-option  :value="'2'">多选题</a-select-option>
          <a-select-option  :value="'3'">判断题</a-select-option>
        </a-select>
      <span style="margin-right:5px">难度</span>
       <a-select   placeholder="请选择难度" v-model="arrData[index].level" style="width:100px;margin-right:10px">
        <a-select-option  :value="'1'">易</a-select-option>
        <a-select-option  :value="'2'">中</a-select-option>
        <a-select-option  :value="'3'">难</a-select-option>
      </a-select>
      <span style="margin-right:5px">数量</span>
        <a-input type="number"  v-model="arrData[index].number" placeholder="数量" style="width:100px;margin-right:10px"/>
      <span style="margin-right:5px">分值</span>
        <a-input  type="number"  v-model="arrData[index].mark" placeholder="分值" style="width:100px"/>
      <a-button icon="delete" type="danger" @click="deleteNew(index)">删除</a-button>
    </div>
  </div>
  <div class="add_info">
    <a-button icon="plus" type="primary" @click="addNew()">追加</a-button>
  </div>
</a-form-model-item>

方法：methods

//追加考试设置
addNew(){
    this.arrData.push({})
},
//删除
deleteNew(index){
    this.arrData.splice(index,1)
},

总分计算：