Puock主题已经正式发售,一款颜值在线的多功能WordPress主题,赶快戳我来看看吧

Vue中通过render添加的元素实现伪双向绑定功能

5,349次阅读
6条评论

前言

在Vue中通过render方式添加的组件的数据是无法和父类的数据实现双向绑定的,但是业务需求必须要实现这样的效果,所以这个时候我们只有通过设置事件等方式来实现类似于这样的效果。 Vue中通过render添加的元素实现伪双向绑定功能

正文

在iView中,例如有如下的表格:

<Table :columns="columns" :data="data" :border="true"></Table>

其数据如下:

export default {
        data(){
            return {
                columns:[],
                data:[{number:11111,verName:'加工精度',verValue:'',verConclusion:''}]
            }
        }
}

在表格中有一列合格选择项,需要下拉列表,故columns中的一列为:

{
    title: '检验结论',
    key:'verConclusion',
    render: (h, params) => {
        return h('Select',{
            props:{
                value:vm.data[params.index].verConclusion
            }
        },[
            h('Option', {
                props: {
                    value: 'qualified',
                }
            }, '合格'),
            h('Option', {
                props: {
                    value: 'unqualified',
                }
            }, '不合格')
        ]);
    }
}

然后我们要实现当选项被选中时data中的对应的数据的值也要同步变化,所以在此组件中加入如下事件:

'on-change':(value) => {
        vm.data[params.index].verConclusion = value;
 }

这时,只要这个下拉列表中的值发生改变时,data中的对应数据也会进行变化。

3
憧憬Licoy
版权声明:本站原创文章,由憧憬Licoy于2017年10月23日发表,共计1553字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(6条评论)
Loading...
轩陌 评论达人LV.1
2018-11-07 12:46:49 回复

:!:厉害了我的哥

Amour 评论达人LV.1
2017-12-29 15:50:20 回复

6666六六

szchenrong 评论达人LV.1
2017-12-28 11:10:00 回复

能不能再设置filtertable,我设置了没有效果,解决了,谢谢你的文章

d 评论达人LV.1
2017-12-04 20:02:11 回复

阿大使