render中给iview的Input和InputNumber绑定键盘事件,并实现数据双向绑定

本人现在用iview-admin在做一个管理端系统,其中遇到在Table中用render给iview的Input绑定键盘事件,苦苦查询最后还是解决了记录一下

给Input添加键盘事件,这里我主要使用了回车事件,这是iview自带的API

let money = params.row.money; // 在render定义的变量,在input中使用,ajax提交的时候改变原有数据的值
h("Input", {
  props: {
    value: money,
    type: "number"
  },
  on: {
    "on-change"(event) {
      money = event.target.value; // 这里对input的数据双向绑定
    },
    "on-enter": () => {
      console.log('回车事件');
      // 如果想要添加其他键盘事件请参考下面的InputNumber
      }
    }
  }
})

InputNumber添加回车事件,其他事件修改keyCode码即可

h("InputNumber", {
  props: {
    value: money,
    min: 0
  },
  on: {
    "on-change"(val) {
      money = val; // 这里对input的数据双向绑定
    }
  },
  nativeOn: {
    keyup: event => {
      if (event.keyCode === 13) {
        console.log('回车事件');
      }
    }
  }
})

结尾,在我自己记录的同时希望能帮到大家

你可能感兴趣的:(vue,iview)