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 + ','
}
}
},
}

效果图：