效果如图：新增表格行，可点编辑再修改表格行内容（也可以自行修改成双击表格可编辑）
思路：
1.新增表格行(handleAddBtn)：给表格数组(我这里是用tableData数组)push空的对象
2.删除行(handleDeleteBtn)：
①首先要拿到对应的索引，即可以用表格的@selection-change="handleDetailSelectionChange"获取勾选的行；
②然后在删除的方法里判断用户勾选选择行的长度（我这里是用checkedDetail数组存储），长度若为0则表示没有选择，为了增加用户体验感给予提示即可；若长度大于0，遍历checkedDetail与tableData作比较（xh属性）相同的删除即可
3.可编辑行（showUpdate）：拿到对应的索引并令其显示（this.showEdit[index] = true;网上说要用 $ set方法，否则页面状态不更新）
4.取消编辑（cancelUpdate）：拿到对应的索引并令其隐藏（this.showEdit[index] = false;）
1、点击新增table表格行
添加点击事件，在handleAddBtn方法中创建表格对象（由于我表格数据太多，就删除了大部分，照样子模仿就行）
<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button>
//点击新增更多handleAddBtn() {this.getaddress = "";//临时存储用户地址et obj = {};//创建空的对象obj.username = "";//用户名称obj.mescode = "";//账号obj.address = "";//地址this.tableData.push(obj);//在tableData表格数组中添加对象}
2、点击删除行，可多选
添加删除点击事件，handleDeleteBtn方法把对应多选选中的行删除
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button>
//删除handleDeleteBtn() {if (this.checkedDetail.length == 0) {this.$alert("请先选择要删除的数据", "提示", {confirmButtonText: "确定",});} else {this.$confirm("请是否确认删除该属性?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",callback: (action) => {if (action === "confirm") {let val = this.checkedDetail; //checkedDetail为表格多选选中的数组val.forEach((val, index) => {this.tableData.forEach((v, i) => {if (val.xh === v.xh) {this.tableData.splice(i, 1);}});});this.$message({message: "删除成功，记得保存修改喔！",type: "success",});this.$refs.tb.clearSelection();return;} else {this.$message({message: "已取消删除操作",type: "warning",});return;}},});}}
3.操作部分的编辑、确定、取消功能
这里的行需要拿到对应的index值，所以需要用slot-scope=“{row,$index}”；
showEdit是个空数组，用来控制对应的标签显示及隐藏的；
这里使用this. $set() 方法将对应索引的行改成true或false
<el-table-column header-align="center" align="center" width="100" label="操作"><template slot-scope="{row,$index}"><el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)" type="text" size="small">编辑</el-button><el-button v-if="showEdit[$index]" @click="submit($index,row)" type="text" size="small" style="color: #85ce61;">确定</el-button><el-button v-if="showEdit[$index]" @click="cancelUpdate($index)" type="text" size="small" style="color: red;">取消</el-button></template></el-table-column>
//点击修改showUpdate(index, row) {console.log("index");this.showEdit[index] = true;this.$set(this.showEdit, index, true); //这里要用$set方法，否则页面状态不更新},//提交修改submit(index, row) {console.log("index", index);this.tableData[index].address = this.getaddress.adrNAME;// this.tableData[index].username = this.getUser.label;console.log("tableData===submit", this.tableData);//发送请求，隐藏输入框this.$message({type: "success",message: "已缓存，记得点击保存提交修改喔！",duration: 888,onClose: () => {this.$set(this.showEdit, index, false); //vue添加属性的方法},});},//取消修改cancelUpdate(index) {this.$confirm("取消修改？", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$set(this.showEdit, index, false);}).catch(() => {});}
完整代码：
<!-- 可新增/删除table表格页面 --><template><div><el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button><el-table ref="tb" :data="tableData" :header-cell-style="{background:'rgb(113 167 228)',color:'#fff'}" :row-class-name="rowClassName" border style="width: 100%; cursor: pointer;" @selection-change="handleDetailSelectionChange"><el-table-column type="selection" align="center" width="50" /><el-table-column label="序号" align="center" prop="xh" width="50" /><el-table-column prop="mescode" align="center" :required="true" label="账号"><template slot-scope="{row,$index}"><span v-if="!showEdit[$index]">{{ row.mescode }}</span><el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].mescode" placeholder="请输入该用户的账号"><i slot="prefix" class="el-input__icon el-icon-search" /></el-input></template></el-table-column><el-table-column prop="password" align="center" :required="true" label="密码"><template slot-scope="{row,$index}"><span v-if="!showEdit[$index]">{{ row.password }}</span><el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].password" placeholder="请输入该用户的密码"><i slot="prefix" class="el-input__icon el-icon-search" /></el-input></template></el-table-column><el-table-column header-align="center" align="center" width="100" label="操作"><template slot-scope="{row,$index}"><el-button v-if="!showEdit[$index]" type="text" size="small" @click="showUpdate($index,row)">编辑</el-button><el-button v-if="showEdit[$index]" type="text" size="small" style="color: #85ce61;" @click="submit($index,row)">确定</el-button><el-button v-if="showEdit[$index]" type="text" size="small" style="color: red;" @click="cancelUpdate($index)">取消</el-button></template></el-table-column></el-table></div></template><script>export default {components: {},data() {return {tableData: [],checkedDetail: [],showEdit: [] // 控制显示及隐藏}},methods: {// 表格的新增rowClassName({ row, rowIndex }) {row.xh = rowIndex + 1},// 单选框选中数据handleDetailSelectionChange(selection) {this.checkedDetail = selection},// 点击新增更多handleAddBtn() {const obj = {}obj.mescode = ''obj.password = ''this.tableData.push(obj)},// 删除handleDeleteBtn() {if (this.checkedDetail.length === 0) {this.$alert('请先选择要删除的数据', '提示', {confirmButtonText: '确定'})} else {this.$confirm('请是否确认删除该属性?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',callback: (action) => {if (action === 'confirm') {const val = this.checkedDetailval.forEach((val, index) => {this.tableData.forEach((v, i) => {if (val.xh === v.xh) {this.tableData.splice(i, 1)}})})this.$message({message: '删除成功，记得保存修改喔！',type: 'success'})this.$refs.tb.clearSelection()return} else {this.$message({message: '已取消删除操作',type: 'warning'})return}}})}},// 点击修改showUpdate(index, row) {console.log('index')this.showEdit[index] = truethis.$set(this.showEdit, index, true) // 这里要用$set方法，否则页面状态不更新},// 取消修改cancelUpdate(index) {this.$confirm('取消修改？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$set(this.showEdit, index, false)}).catch(() => {})},// 提交修改submit(index, row) {// 发送请求，隐藏输入框this.$message({type: 'success',message: '已缓存，记得点击保存提交修改喔！',duration: 888,onClose: () => {this.$set(this.showEdit, index, false) // vue添加属性的方法}})}}}</script><style></style>
vue实现element自定义新增 删除table表格的行 和可输入input（可以自行修改成双击表格可编辑）
