基于el-table实现行内增删改
<el-table :data="items"
style="width: 100%;margin-top: 16px"
border
:key="randomKey">
<el-table-column label="计划名称"
property="name">
<template slot-scope="{row}">
<template v-if="row.edit">
<el-input v-model="row.name"></el-input>
</template>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="计划完成时间"
property="executionDate" width="175">
<template slot-scope="scope">
<el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date"
v-model="scope.row.timeEnd">
</el-date-picker>
<span v-else>{{ parseTime(scope.row.timeEnd) }}</span>
</template>
</el-table-column>
<el-table-column label="协同人"
property="leaderList">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-select
v-model="scope.row.leaderList"
clearable filterable multiple>
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.nickname"
:value="item.userId">
</el-option>
</el-select>
</template>
<span v-else>{{ scope.row.leaderName }}</span>
</template>
</el-table-column>
<el-table-column label="执行人" width="80">
<template>
<span>{{ $store.getters.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="100">
<template slot-scope="{row,column,$index}">
<el-button
v-if="row.edit"
type="success" icon="el-icon-check" circle
size="small"
@click="confirmEdit(row)"
>
</el-button>
<el-button
v-if="row.edit"
icon="el-icon-close" circle
size="small"
@click="cancelEdit(row)"
>
</el-button>
<el-button
type="primary" icon="el-icon-edit" circle
v-if="!row.edit"
size="small"
@click="row.edit=!row.edit"
>
</el-button>
<el-button
type="danger" icon="el-icon-delete" circle
size="small" @click="handleDelete($index)"
v-if="!row.edit"
>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="display: flex;margin-top: 28px;justify-content: center;">
<el-button @click="addSon" size="small" icon="el-icon-plus">添加子计划</el-button>
</div>