vue + element-ui 实现表格 增加 删除 行 操作 以及 复选框实现

HTML 部分：

  <tr class="height320" style="border-top: 1px">
                  <td class="tdBg jianli_td lh18 textAlign">
                    <br>简<br>历
                  </td>

                  <td colspan="6">
                    <el-form ref="inServForm" :model="inServForm" label-width="0px" size="small">
                      <el-form-item prop="servin">

                        <el-button type="primary" @click="addRow(infiledList)">新增简历</el-button>
                        <el-button type="primary" @click="addCheck(infiledList)">添加勾选</el-button>

                        <el-table border :data="infiledList" style="width: 100%">

                          <el-table-column :width="columnOtherWidth" label="复选">
                            <template slot-scope="scope">
                              <el-checkbox v-model="scope.row.isCheck" />
                            </template>
                          </el-table-column>

                          <el-table-column prop="fildna" :width="columnTimeWidth" label="开始时间">
                            <template scope="scope">
                              <el-input v-model="scope.row.isCheck" size="mini" />
                            </template>
                          </el-table-column>
                          <el-table-column prop="fildna" :width="columnTimeWidth" label="截止时间">
                            <template scope="scope">
                              <el-input v-model="scope.row.fildna" size="mini" />
                            </template>
                          </el-table-column>
                          <el-table-column prop="remark" :width="columnRemarkWidth" label="简历信息">
                            <template scope="scope">
                              <el-input v-model="scope.row.remark" size="mini" />
                            </template>
                          </el-table-column>
                          
                          <el-table-column prop="remark" label="任职年限">
                            <template scope="scope">
                              <el-input v-model="scope.row.remark" size="mini" />
                            </template>
                          </el-table-column>
                          <el-table-column prop="remark" label="任重要职务、重要经历标识说明">
                            <template scope="scope">
                              <el-input v-model="scope.row.remark" size="mini" />
                            </template>
                          </el-table-column>
                          
                          <el-table-column prop="remark" label="经历年限">
                            <template scope="scope">
                              <el-input v-model="scope.row.remark" size="mini" />
                            </template>
                          </el-table-column>
                          
                          <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                              <el-button size="small" @click.native.prevent="deleteRow(scope.$index, infiledList)"> 移除 </el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <!--                        </template>-->
                      </el-form-item>
                    </el-form>
                  </td>
                </tr>

                <tr>
                  <td class="tdBg height35 textAlign">
                    历任主要职务
                  </td>
                  <td class="formValue" colspan="12" align="left">
                    <textarea id="jqpyfx" v-model="getNewList" name="jqpyfx" style="width : 100%;" rows="4" maxlength="500" class="form-control " />
                  </td>
                </tr>
                <tr>
                  <td class="tdBg height35 textAlign">
                    历任重要职务重要经历标识
                  </td>
                  <td class="formValue" colspan="12" align="left">
                    <textarea id="jqpyfx" v-model="person.nationdesc" name="jqpyfx" style="width : 100%;" rows="4" maxlength="500" class="form-control " />
                  </td>
                </tr>
                <tr>
                  <td class="tdBg height35 textAlign">
                    工作经历细项
                  </td>
                  <td class="formValue" colspan="12" align="left">
                    <textarea id="jqpyfx" v-model="person.nationdesc" name="jqpyfx" style="width : 100%; height: 120px" rows="4" maxlength="500" class="form-control " />
                  </td>
                </tr>

数据部分：

data() {
    return {
      infiledList: [], // 简历信息（简历的所有信息）
      getNewList: '', // 勾选存放信息 复选框用
      isCheck: false, // 简历是否勾选 复选框用
      }
      }

方法部分：

methods: {
    // 简历删除行（移除）
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 简历新增行（添加简历）
    addRow(tableData, event) {
      tableData.push({ fildna: '', fildtp: '', remark: ''
      })
    },
    // 添加勾选到历任主要职务（复选框勾选）
    addCheck() {
      this.getNewList = ''
      for (const item of this.infiledList) {
        // eslint-disable-next-line eqeqeq
        if (item.isCheck == true) {
          this.getNewList += item.remark + ','
        }
      }
    },
    }

效果图：