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

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

前言

正文

发表评论取消回复

目前评论：4 其中：访客 3 博主 1