如何实现在使用element-ui中table的组件时可以实现编辑和增删改查功能（1.使用失去焦点事件，调用后端接口进行input框的查重。2.使用element UI 的row-click）

element前端ui组件挺美观的，我们也使用了他们的table组件，但是默认没有提供行编辑功能，我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充，不可编辑；我们可以在template里面包裹一个input框来实现单元格可编辑；等每一个单元格都可编辑的时候，我们可以在每一行后面加一个按钮来控制只可编辑当前行。

先来看一下原始不可编辑的写法：

 再来看一下可编辑的写法：

  注意在每一个template元素里面我都放了一个input元素，依然使用v-model绑定值，只不过加了一个disable属性来控制是否可编辑；页面初始化的时候，默认整个表格不可编辑，只有点击了某一行后面的编辑按钮以后，这一行才可以编辑。

 handleEditYuan(row) {
 	 this.editDisabled = false
 },
// 保存
handleSaveYuan(row) {
	let _this = this;
	let srcColumnSqc = row.srcColumnSqc;
	let srcColumn = row.srcColumn;
	let srcColumnName = row.srcColumnName;
	let srcColumnType = row.srcColumnType;
	let id = row.id
	let apiType = this.yuanFormData.apiType;
	let srcTable = this.yuanFormData.srcTable;
	let jobName = this.yuanFormData.jobName;
	editYuanTable(apiType,srcTable,srcColumnSqc,srcColumn,srcColumnName,srcColumnType,jobName,id).then(res=>{
 		console.log(res)
		if(res.data.code ==200){
			_this.$message.success(res.data.msg)
			_this.checkYuanVisible=false
			_this.editDisabled = true
		}else{
			 _this.$message.error(res.data.msg)
  			_this.editDisabled = false
			}
 	})
},

一般来说列名或者序号会有唯一性的概念，所以我会做一个失去焦点事件，失去焦点时调用后端接口。我会在很多地方用到失去焦点事件，所以我会用type参数去判断使用调用哪个接口，传什么参数

		//获取点击时该行的数据
		handdleRow(row){
            //console.log(row.id)
            this.checkId = row.id
        },
        //失去焦点验证序号或列名是否重复
        ColumnBlur(name, type){
            let _this = this
            console.log(name , type)
            let checkValue = name;
            let id = this.checkId;
            let apiType = this.apiType;
            if(type == "srcColumnSqc"){
                let checkType = 1
                checkNumAndColumns(checkValue,id,apiType,checkType).then(res=>{
                    if(res.data.code == 200){
                        
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })
            }else if(type == "srcColumnName"){
                let checkType = 2
                checkNumAndColumns(checkValue,id,apiType,checkType).then(res=>{
                   if(res.data.code == 200){
                        
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })
            }else if(type == "srcColumnSqc2"){
                let checkType = 1
                checkNumAndColumns(checkValue,id,apiType,checkType).then(res=>{
                    if(res.data.code == 200){
                        
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })
            }else{
                let checkType = 2
                checkNumAndColumns(checkValue,id,apiType,checkType).then(res=>{
                    if(res.data.code == 200){
                        
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })
            }
        }