iview render input 每输入一个字符就会自动跳出焦点

最新推荐文章于 2024-09-21 18:22:17 发布

地藏许菩萨

最新推荐文章于 2024-09-21 18:22:17 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： pc前端 vue 文章标签： vue render input

本文链接：https://blog.youkuaiyun.com/qq_40028729/article/details/89188987

vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

pc前端

10 篇文章

订阅专栏

本文介绍了一个iview表格组件中Input框在输入字符后立即失焦的问题及其解决方案。通过修改事件处理方式，避免了table重新渲染，从而解决了Input失焦的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到的bug，博客有空补上
在写iview render函数时，刚开始是按照下边代码写的，这样input输入的一个字符就是失焦。
原因：

{
          title: "注意交接事项",
          key: "handler",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: params.row.matterAttention,
                placeholder: "请输入注意事项",
                size: "small"
              },
              on: {
               		input: e => {
                    //params.row.matterAttention = e.target.value;
                    this.tableData[params.index].matterAttention = e;
                }
              }
            });
          }
        }

方法：
表格是绑定的table的数据是tableData，input数据改变的时候你把整行的数据替换掉，就不会造成table重新渲染，导致input失焦了

{
          title: "注意交接事项",
          key: "handler",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: params.row.matterAttention,
                placeholder: "请输入注意事项",
                size: "small"
              },
              on: {
               'on-change': e => {
                    params.row.matterAttention = e.target.value;
                    this.tableData[params.index] = params.row;
                }
              }
            });
          }
        }