iview render可编辑表格, input 自动获取光标焦点

在使用 iview 的 render 渲染函数时,我们动态生成的 Input 输入框,自动获取焦点时,只能第一次获取到焦点。

解决方案:

设置类名 获取光标

 {
          title: "值",
          key: "value",
          render: (h, params) => {
            if (params.row.$isEdit) {
              return h("Input", {
                props: {
                  type: "text",
                  value: params.row.value,
                  autofocus: true,    //开启获取焦点
                },
                attrs: {
                  // ref: 'no',
                  class: "replyBox",   //设置类名
                },
                on: {
                  //表单失去焦点触发事件
                  "on-blur": (event) => {
                    this.targetValue = event.target.value;
                    if (event.target.value == "") {
                      this.$Message.error("请输入值");
                    } else {
                      //表单不为空,即通过验证,值附上去
                      params.row.value = event.target.value;
                      this.data1[params.index].value = event.target.value;
                      this.rowvalue = this.data1[params.index].value;
                      this.$set(params.row, "$isEdit", false);
                    }
                  },
                },
              });
            } else {
              console.log(2222);
              return h(
                "div",
                {
                  on: {
                    click: () => {
                      //把定时器照搬 类名更改与上面一致即可
                      setTimeout(() => {
                        this.$nextTick(() => {
                          document
                            .getElementsByClassName("replyBox")[0]
                            .childNodes[6].focus();
                          // 获取焦点
                        });
                      }, 300);
                      this.$set(params.row, "$isEdit", true);
                    },
                  },
                },
                params.row.value
              );
            }
          },
        },

 可编辑表格  鼠标点击div  类型转变input 鼠标移开 转变div

  • 0
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爬楼梯的前端小白

你的打赏是我创作最大的动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值