copy 文档 https://www.cnblogs.com/CodeTheUniverse/p/13213088.html
先上一张页面展示图,画面很简单(当然这个功能也很简单,不过笔者刚接触Vue,为了避免以后出现相同需求再重写,所以记录一下)
老样子,直接贴代码,不多BB
<template> <el-row style="height: 100%;100%" type="flex" justify="center"> <el-col :span="24"> <el-table :data="tableData" :stripe="true" height="100%" style=" 100%" :row-class-name="tableRowClassName"> <el-table-column prop="date" label="客户 ID" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-input v-if=" isEdit == scope.$index " v-model="scope.row.date" placeholder="请输入内容" style="text-align: center;"></el-input> <span v-if=" isEdit != scope.$index ">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column prop="name" label="地域别" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-input v-if=" isEdit == scope.$index " v-model="scope.row.name" placeholder="请输入内容" style="text-align: center;"></el-input> <span v-if=" isEdit != scope.$index ">{{ scope.row.name }}</span> </template> </el-table-column> <el-table-column fixed="right" label="操作" width="auto" align="center" :resizable="false"> <template slot-scope="scope"> <el-button-group> <el-button v-if=" isEdit == scope.$index " size="mini" @click="handleEdit(scope.$index, scope.row, 1)">保存</el-button> <el-button v-if=" isEdit != scope.$index " size="mini" @click="handleEdit(scope.$index, scope.row, 0)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </el-button-group> </template> </el-table-column> <el-button slot="append" style=" 100%;border-radius: 0;border-top: 0;border-left: 0;border-right: 0;" @click="appendNew">点击追加一行</el-button> </el-table> </el-col> </el-row> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎' }, { date: '2016-05-04', name: '王小虎' }, { date: '2016-05-01', name: '王小虎' }, { date: '2016-05-03', name: '王小虎' }], isEdit: -99 } }, methods: { handleEdit(index, row, status) { switch (status) { case 0: this.isEdit = index; break; case 1: this.isEdit = -99; break; } }, handleDelete(index, row) { this.$confirm('这将会永久删除该行数据,是否继续?', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.tableData.splice(index, 1); this.$message({ type: 'success', message: '删除成功' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, appendNew(){ this.tableData.push({ date: '', name: '' }); this.isEdit = this.tableData.length - 1 }, tableRowClassName({row, rowIndex}){ row.index = rowIndex } } } </script> <style> html, body { height: 100%; } </style>