vue+Element实现在表格里新增数据

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);

            },

效果如下图所示 点击+按钮即可在表格新增一条数据