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

最终效果如下

实现要求：

1. 如果输入的内容不是非负整数，那么提示报错，并且将值变为输入前的内容；
2. 如果输入正确，则当输入的内容发生改变并且失去焦点以后，触发事件，重新获取列表；

实现思路

1. 使用原生的input框，更容易控制；
2. 当输入框获取焦点以后，保存原始值；
3. 监听回车点击事件与change事件，判断输入的值是否满足条件：
   • 如果满足条件，那么就根据输入的内容更新内容，并且重新获取列表内容；
   • 如果不满足条件，报错，同时通过操作dom，将input的value值进行改变；

html部分

1. 代码部分

      <el-table-column align="center"  style="width: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);
}