http://t.zoukankan.com/usebtf-p-9525738.html
实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容; 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表; 实现思路 使用原生的input框,更容易控制; 当输入框获取焦点以后,保存原始值; 监听回车点击事件与change事件,判断输入的值是否满足条件: 如果满足条件,那么就根据输入的内容更新内容,并且重新获取列表内容; 如果不满足条件,报错,同时通过操作dom,将input的value值进行改变; html部分 1. 代码部分 <el-table-column align="center" style="20%" label="排序"> <template slot-scope="scope"> <input type="text" maxlength="2" class="order-input" @keyup.enter.native="handleChangeOrder($event, scope.row, $event.target.value)" @change="handleChangeOrder($event, scope.row, $event.target.value)" :value="scope.row.orderNum" @focus="saveTemp(scope.row.orderNum)"> </template> </el-table-column> 通过@focus这个事件,将原始值保存起来 通过@keyup.enter.native、@change这两个事件,触发判断输入的内容是否合理,其中我们可以通过传入的$event获取到需要的dom($event.target就是输入框对应的input标签),同时通过$event.target.value传入输入框里面的内容; 2. 注意部分 不要使用v-model与 el-input组合,采用原生input标签,可能更灵活。因为当使用v-model(如下面的这种类型)时,如果判断输入错误以后,尽管可以通过操作dom,使input的value值发生改变,但是通过v-model绑定的内容依旧为我们输入的错误内容,也就是说当我们下次获取焦点时,如果保存的是v-model的内容,那么将是上次输入的错误信息; <el-input ... v-model="scope.row.orderNum" @focus="saveTemp(scope.row.orderNum)"></el-input> 这儿再啰嗦一句,v-model绑定的内容,是通过@input输入的内容,无法通过js进行触发,也就是说无法通过js将v-model绑定的内容变为以前的内容(仅仅指el-table里面通过scope.row绑定的数据) js部分 1. 代码部分 handleChangeOrder(event, row, orderNum) { if (!isPositiveNum(+orderNum)) { event.target.value = this.orderTemp; this.$message({ message: '请输入非负整数', type: 'warning' }); return } ... this.put(); // 这儿是update ... this.getList(); // 这儿是重新获取列表 ... }, saveTemp (value) { this.orderTemp = value; } 2. 注意部分 isPositiveNum() 为引入的判断是否是非负整数的函数 export function isPositiveNum (s) { var re = /^(0|[1-9]d*)$/ ; return re.test(s); }
标签:el,排序功能,value,Element,内容,input,model,event,输入 From: https://www.cnblogs.com/minch/p/17017304.html