基于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);
}

 

posted @   minch  阅读(205)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示