iView中Table通过render添加一个Input如何双向绑定数据

有一个Table:

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

JS代码如下:

 export default {
        data(){
            return {
                columns:[],
                data:[{name:11111,name2:'加工精度',value:'',key:''}]
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                let vm = this;
                this.columns = [
                    {
                        title: '序号',
                        key: 'name'
                    },
                    {
                        title: '检验项名称',
                        key: 'name2'
                    },
                    {
                        title: '检验值',
                        key:'value',
                        render: (h, params) => {
                            return h('Input',{
                                props:{
                                    type:'text',
                                    value:vm.data[params.index].value //此处如何让数据双向绑定
                                },
                                on:{
                                    'on-change':(event) => {
                                        console.log(params)
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '检验结论',
                        key:'key',
                        render: (h, params) => {
                            return h('Select',[
                                h('Option', {
                                    props: {
                                        value: '1',
                                    }
                                }, '合格'),
                                h('Option', {
                                    props: {
                                        value: '2',
                                    }
                                }, '不合格')
                            ]);
                        }
                    },
                ]
            },
            get(){
                console.log(this.data)
            }
        }
    }

回答:

render: (h, params) => {
                            return h('Input',{
                                props:{
                                    type:'text',
                                    value:vm.data[params.index].value
                                },
                                on:{
                                    'on-blur':(event) => {
                                        vm.data[params.index].value = event.target.value;
                                    }
                                },
                            })
                        }

通过这个方法可以解决

回答:

value:vm.data[params.index].value
并没有实现双向绑定呢?
我是这样写的,大神帮忙看一下。
{

        title: '数量',
        key: 'numLots',
        width: 100,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h('Input', {
              props: {
              value:this.data[params.index].numLots,
              },
            },)
          ]);
        }
      },

回答:

这样写也行,就是实时更新,不用Blur

                    props: {
                      //将单元格的值给Input
                      value:vm.data[params.index].value
                    },
                    on:{
                      'on-change' (event) {
                        //值改变时
                        //将渲染后的值重新赋值给单元格值
                        vm.data[params.index].value = event.target.value;
                      }
                    }

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注