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

前言

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

正文

在iView中，例如有如下的表格：

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

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

其数据如下：

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

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', } }, '不合格') ]); }}

{

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; }

'on-change':(value) => {

vm.data[params.index].verConclusion = value;

}

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

发表评论取消回复

目前评论：6 其中：访客 4 博主 2

轩陌 1 上海市电信
回复 2018年11月07日下午12:46 11楼

:!:厉害了我的哥
- 憧憬Licoy 博主四川省成都市成华区电信
  回复 2018年11月14日下午12:05 1层
  
  @轩陌大佬说笑了

Amour 1 广东省广州市电信
回复 2017年12月29日下午3:50 12楼

6666六六

szchenrong 0 江苏省苏州市电信
回复 2017年12月28日上午11:10 13楼

能不能再设置filtertable，我设置了没有效果,解决了，谢谢你的文章
- 憧憬Licoy 博主四川省成都市双流县电信
  回复 2017年12月29日下午4:07 1层
  
  @szchenrong 过滤表格？没有弄呢

d 0 上海市青浦区电信
回复 2017年12月04日下午8:02 14楼

阿大使