在使用iview过程中,发现一个很不方便的问题,就是table居然没有editor功能。。。这个在长期使用easyui后是觉得不能忍的事情。于是研究了一下table,发现可以使用render来实现editor功能。
如何使用呢?简单说table,使用的时候需要一个columns参数,这个参数是用来解析列映射的,render也能在columns里面声明:
Clumns:[
{
title: '序号',
key: 'seq'
}, {
title: '名称',
key: 'name'
},
{
title: '数量',
key: 'count',
render: (h, params) =>
{
return h("div", [
h(
"Input",
{
props: {
},
domProps: {
},
style: {
textAlign: "center"
},
on:{}
}
)
]);
}
}
]
这样,我们就在数量一列成功绑定了一个input输入框了,现在问题来了,输入框有了,可是输入之后的数据如何取出来呢?
现在我们绑定的input里面有这么几个属性:
props:绑定vue的属性
domProps:绑定生成的dom的属性
style:dom的样式文件
on:绑定事件
那么我们就需要使用这么几个属性来实现双向绑定。
首先,我们需要把每一列的值都赋给imput里面,是imput绑定展示每一列的值,这时候需要使用到imput的value属性了,我们知道,input展示的值其实就是它的value的值,所以我们需要使用props来绑定一下。
props: {
value:params.row.count
},
domProps: {
value:params.row.count
},
我这里处理是把vue属性和dom属性都给他绑定上,也没有测试是哪一个属性触发了绑定效果。有空闲的小伙伴可以自己测试一下,我也就偷了个懒。
现在input已经绑定了展示属性了,那么我们还需要把input输入的值绑定个我的数据。我发现使用prop没有用了,那么我们就用其他的方式来实现。
现在还有一个on没有使用,这个是用来绑定input触发事件的,我们现在就有了多个实现方案,比如在input失去焦点的时候触发,input里面的值改变的时候触发,或者你想写个定时器触发都行。
那on属性怎么使用呢,这可是个大坑。。。我刚开始的时候直接写 :
on:{
change: (event) => {
console.log(event);
}
onChange: (event) => {
console.log(event);
}
}
然而,怎么不触发????写成on-change又会报错。。。。。
最后,查找资料,发现,我忘了一个很重要的东西。。。那就是 引号 。。。。
on:{
'on-change': (event) => {
console.log(event);
console.log(params);
}
}
。。。这还真是vue。。。
好了,事件触发了,如何绑定到数据里面去呢?我这里采用的是onChange事件来触发,我顺手把render的参数params和事件event打印了出来,在里面找了一下,发现params里面就有row这个属性,应该就是这一行,event里面倒是没有看出什么东西,但是看见有个target,于是就直接用targe来取了dom对象然后调用input的vuleu获取input中的值:
on:{
'on-change': (event) => {
params.row.count= event.target.value;
}
}
这下该好了把,于是我打了个断点,发现赋值取值都成功了,但是,在我submit的时候我后台拿到data里面居然又没有值了。。。
这次我是真没有找到解决办法。于是在onchange事件中用this.data取我table的数据data,然后通过params.row.id来找到这一条记录,然后去修改data值。。。终于实现了双向绑定。