vue实现element自定义新增、删除table表格的行，和可输入input（可以自行修改成双击表格可编辑）

效果如图：新增表格行，可点编辑再修改表格行内容（也可以自行修改成双击表格可编辑）

 思路：

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方法中创建表格对象（由于我表格数据太多，就删除了大部分，照样子模仿就行）

添加

//点击新增更多
handleAddBtn() {
  this.getaddress = "";	//临时存储用户地址
  et obj = {};	//创建空的对象
  obj.username = "";	//用户名称
  obj.mescode = "";	//账号
  obj.address = "";	//地址
  this.tableData.push(obj);	//在tableData表格数组中添加对象
}

2、点击删除行，可多选

添加删除点击事件，handleDeleteBtn方法把对应多选选中的行删除

删除

//删除
        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

//点击修改
        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(() => {});
        }

完整代码：