首页 > 其他分享 >基于Element-UI的el-table,input框输入实现排序功能

基于Element-UI的el-table,input框输入实现排序功能

时间:2022-12-31 21:35:12浏览次数:40  
标签:el 排序功能 value Element 内容 input model event 输入

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

相关文章