在使用 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