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

7,654次阅读
6 条评论

共计 688 个字符,预计需要花费 2 分钟才能阅读完成。

前言

在 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 中的对应数据也会进行变化。

正文完
使用官方微信小程序体验更多功能
post-qrcode
 3
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 于2017-10-23发表,共计688字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(6 条评论)
轩陌 评论达人 LV.1
2018-11-07 12:46:49 回复

:!:厉害了我的哥

 Macintosh  Chrome  中国上海上海市电信
Amour 评论达人 LV.1
2017-12-29 15:50:20 回复

6666六六

 Windows  Chrome  中国广东省广州市电信
szchenrong 评论达人 LV.1
2017-12-28 11:10:00 回复

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

 Windows  Chrome  中国江苏省苏州市电信
d 评论达人 LV.1
2017-12-04 20:02:11 回复

阿大使

 Windows  Chrome  中国上海上海市电信