基于Element-UI的el-table,input框输入实现排序功能
http://t.zoukankan.com/usebtf-p-9525738.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容; 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表; 实现思路 使用原生的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); } |
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」