vue table表单（文本框，输入框，按钮）

图例

代码

html

<table border="true" class="ant-table-fixed" style="width: 100%; border: 1px solid #e8e8e8;">
                  <tr>
                    <th width="10%">考核指标</th>
                    <th width="10%">分值（分）</th>
                    <th width="10%">完成时限（进展情况）</th>
                    <th width="10%">工作措施</th>
                    <th width="10%">工作成效</th>
                    <th width="10%">得分</th>
                    <th width="10%">操作</th>
                  </tr>
                  <tr :key="index" v-for="(item,index) in specialList">
                    <td>
                      <a-form-item>
                        <a-textarea
                          :auto-size="{ minRows: 2, maxRows: 6 }"
                          v-model="specialList[index].assessTarget"
                        >
                        </a-textarea>
                      </a-form-item>
                    </td>
                    <td>
                      <a-form-item>
                        <a-input
                          placeholder="请输入"
                          v-model="specialList[index].score"
                        >
                        </a-input>
                      </a-form-item>
                    </td>
                    <td>
                      <a-form-item>
                        <a-textarea
                          :auto-size="{ minRows: 2, maxRows: 6 }"
                          v-model="specialList[index].progress"
                        >
                        </a-textarea>
                      </a-form-item>
                    </td>
                    <td>
                      <a-form-item>
                        <a-textarea
                          :auto-size="{ minRows: 2, maxRows: 6 }"
                          v-model="specialList[index].workMeasure"
                        >
                        </a-textarea>
                      </a-form-item>
                    </td>
                    <td>
                      <a-form-item>
                        <a-textarea
                          :auto-size="{ minRows: 2, maxRows: 6 }"
                          v-model="specialList[index].workResult"
                        >
                        </a-textarea>
                      </a-form-item>
                    </td>
                    <td>
                      <a-form-item>
                        <a-input
                          placeholder="请输入"
                          v-model="specialList[index].gainScore"
                        >
                        </a-input>
                      </a-form-item>
                    </td>
                    <td>
                      <a @click="onAdd" href="javascript:;">新增</a>
                      <a-divider type="vertical"/>
                      <a @click="onEmp(index)" href="javascript:;">清空</a>
                      <a-divider v-if="index !== 0" type="vertical"/>
                      <a v-if="index !== 0" @click="onDelete(index)" href="javascript:;">删除</a>
                    </td>
                  </tr>
                </table>

js

methods:{
    onAdd() {
        const {count, specialList} = this
        const newSpecialList = {
          assessTarget: '',
          score: '',
          progress: '',
          workMeasure: '',
          workResult: '',
          gainScore: '',
        }
        this.specialList = [...specialList, newSpecialList]
        this.count = count + 1
      },
      onEmp(index) {
        for (let i = 0; i < this.specialList.length; i++) {
          if (index === i) {
            this.specialList[i].assessTarget = ''
            this.specialList[i].score = ''
            this.specialList[i].progress = ''
            this.specialList[i].workMeasure = ''
            this.specialList[i].workResult = ''
            this.specialList[i].gainScore = ''
          }
        }
      },
      onDelete(choiceIndex) {
        this.specialList.splice(choiceIndex,1)
      }
}