1.通过isEditing字段来判断此行数据处在新增还是浏览状态
2.通过卡槽来切换修改和浏览状态
<el-button type="primary" icon="el-icon-plus" plain size="mini" circle
style="margin-bottom: 0.5%;margin-left: 0.5%;padding: 5px;" @click="actAdd"></el-button>
<el-table style="width: 99%;" height="160px" class="custom-table" :data="actTable">
<el-table-column prop="order" label="序号" width="50" type="index">
</el-table-column>
<el-table-column prop="standardEffort" label="成果" width="558">
<template slot-scope="scope">
<div class="ellipsis" :title="scope.row.standardEffort">
<el-input v-if="scope.row.isEditing" v-model="scope.row.standardEffort"
clearable></el-input>
<div v-else>
{{ scope.row.standardEffort.length > 40 ? scope.row.standardEffort.slice(0,
40) + '...' : scope.row.standardEffort }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="recordPerson" label="创建人" width="120">
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="scope.row.isEditing = true"
v-if="!scope.row.isEditing" size="mini" circle plain
style="margin-left: 5%;padding: 1px;height: 15px;"></el-button>
<el-button type="danger" icon="el-icon-delete"
@click="deleteAct(scope.$index, scope.row)" v-if="!scope.row.isEditing"
size="mini" plain
style="margin-left: 5%;padding: 1px;height: 15px;"></el-button>
<el-button type="success" icon="el-icon-check"
@click="saveAct(scope.$index, scope.row)" v-if="scope.row.isEditing" size="mini"
circle plain style="margin-left: 5%;padding: 1px;height: 15px;"></el-button>
</template>
</el-table-column>
</el-table>
3.js
通过点击监听来新增数据
actAdd() {
this.actOrder++;
const newRow = { order: this.actOrder, recordPerson: this.$store.state.user.name, standardEffort: '', isEditing: true };
this.actTable.push(newRow);
},
效果如下图所示 点击+按钮即可在表格新增一条数据