Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

table单元格里面有input,input每输入一个字符就会自动跳出焦点 #1781

Closed
liu-xinhui opened this issue Sep 4, 2017 · 14 comments

Comments

@liu-xinhui
Copy link

liu-xinhui commented Sep 4, 2017

image
image
每输入一个字符,input都会跳出焦点,咋办呢

@webproblem
Copy link

代码中的this.actiondata是table组件的:data的值吧,在table中通过render函数自定义的时候,事件里面不能这样赋值,一种解决方式是:定义一个存储数组变量,用这个存储数组来赋值,最后再把存储数组的值赋值给this.actiondata。
如:

data: {
tempArray:[]
}

......

h("Input",{
    props: this.tempArray[params.index].id,
	on: {
	    input: function(event){
		   this.tempArray[params.index].id = event; 
		}
	}
})

然后再监听这个存储数组

watch: {
    tempArray: function(val){
	    this.actiondata = val;   //将存储数组的值赋值给this.actiondata
	}
}

@icarusion
Copy link
Contributor

The user above is correct

@lockontan
Copy link

假如你绑定的table的数据是tableData,input数据改变的时候你把整行的数据替换掉,就不会造成table重新渲染,导致input失焦了
h('InputNumber', {
props: {
value: parseInt(params.row.total),
size: 'small',
min: 0
},
on: {
input: (value) => {
params.row.total = value
this.tableData[params.index] = params.row
}
}
}

@justindeng0405
Copy link

给个赞

@inroam
Copy link

inroam commented Mar 26, 2018

为解决办法 点赞

@Iamlqyfly
Copy link

Iamlqyfly commented Jun 1, 2018

@lockontan 我用了你这个方法,添加了this.tableData[params.index] = params.row这一行代码
input框都不能输入东西了

@lockontan
Copy link

@lIamlqyfly 贴下你的代码

@yiluxiangbei87110
Copy link

使用change代替input就可以了

@yiluxiangbei87110
Copy link

假如你绑定的table的数据是tableData,input数据改变的时候你把整行的数据替换掉,就不会造成table重新渲染,导致input失焦了
h('InputNumber', {
props: {
value: parseInt(params.row.total),
size: 'small',
min: 0
},
on: {
input: (value) => {
params.row.total = value
this.tableData[params.index] = params.row
}
}
}

使用change代替input也可以解决此问题

@hufenghuai
Copy link

为什么整行把数据替换就不会造成table重新渲染呢?

@Guing
Copy link

Guing commented Jan 17, 2019

this.tableData[params.index] = params.row;
这样子不会做响应式更新,也不会刷新视图,重新渲染table。

@hccluck
Copy link

hccluck commented Jan 6, 2020

params.row.total = value
this.tableData[params.index] = params.row
用了这种方法来避免失去焦点问题之后,watch中怎样监听数据变化呢,监听不到数据的变化了呀,怎么办

@hccluck
Copy link

hccluck commented Jan 6, 2020

这个问题解决了没啊?在几点几的版本不会有这个问题啊?

@dongzhichaogeek
Copy link

dongzhichaogeek commented Aug 30, 2020

一直想用template 的方式实现这个功能。(不愿意使用render)
解决也是一样:Input事件中将整行数据放入数组对应的位置
1.整行替换@input="(value)=>{row.AttrName = value; this.data[index] = row}"
2.离焦保存@on-blur="blurAttrName (row,index)"
3.使用Form的prop进行校验

image
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests