前言
在Vue中通过render方式添加的组件的数据是无法和父类的数据实现双向绑定的,但是业务需求必须要实现这样的效果,所以这个时候我们只有通过设置事件等方式来实现类似于这样的效果。
正文
在iView中,例如有如下的表格:
1 | <Table :columns="columns" :data="data" :border="true"></Table> |
其数据如下:
1 2 3 4 5 6 7 8 | export default { data(){ return { columns:[], data:[{number:11111,verName:'加工精度',verValue:'',verConclusion:''}] } } } |
在表格中有一列合格选择项,需要下拉列表,故columns中的一列为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { 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中的对应的数据的值也要同步变化,所以在此组件中加入如下事件:
1 2 3 | 'on-change':(value) => { vm.data[params.index].verConclusion = value; } |
这时,只要这个下拉列表中的值发生改变时,data中的对应数据也会进行变化。
2018年11月07日 下午12:46 11楼
:!:厉害了我的哥
2018年11月14日 下午12:05 1层
@轩陌 大佬说笑了
2017年12月29日 下午3:50 12楼
6666六六
2017年12月28日 上午11:10 13楼
能不能再设置filtertable,我设置了没有效果,解决了,谢谢你的文章
2017年12月29日 下午4:07 1层
@szchenrong 过滤表格?没有弄呢
2017年12月04日 下午8:02 14楼
阿大使