iview 使用 render 实现 在 table中插入input框双向绑定

    在使用iview过程中，发现一个很不方便的问题，就是table居然没有editor功能。。。这个在长期使用easyui后是觉得不能忍的事情。于是研究了一下table，发现可以使用render来实现editor功能。

    如何使用呢？简单说table，使用的时候需要一个columns参数，这个参数是用来解析列映射的，render也能在columns里面声明：

Clumns:[

                    {

                        title: '序号',

                        key: 'seq'

                    }, {

                        title: '名称',

                        key: 'name'

                    },

                    {

                        title: '数量',

                        key: 'count',

                        render: (h, params) =>

                            {

                                return h("div", [

                                    h(

                                        "Input",

                                        {

                                            props: {

                                            },

                                            domProps: {

                                            },

                                            style: {

                                                textAlign: "center"

                                            }，

                                            on:{}

                                        }

                                    )

                                ]);

                            }

                    }

                ]

    这样，我们就在数量一列成功绑定了一个input输入框了，现在问题来了，输入框有了，可是输入之后的数据如何取出来呢？

    现在我们绑定的input里面有这么几个属性：

    props：绑定vue的属性

    domProps：绑定生成的dom的属性

    style：dom的样式文件

    on：绑定事件

    那么我们就需要使用这么几个属性来实现双向绑定。

    首先，我们需要把每一列的值都赋给imput里面，是imput绑定展示每一列的值，这时候需要使用到imput的value属性了，我们知道，input展示的值其实就是它的value的值，所以我们需要使用props来绑定一下。

    props: {

              value:params.row.count

    },

      domProps: {

               value:params.row.count

     },

    我这里处理是把vue属性和dom属性都给他绑定上，也没有测试是哪一个属性触发了绑定效果。有空闲的小伙伴可以自己测试一下，我也就偷了个懒。

    现在input已经绑定了展示属性了，那么我们还需要把input输入的值绑定个我的数据。我发现使用prop没有用了，那么我们就用其他的方式来实现。

    现在还有一个on没有使用，这个是用来绑定input触发事件的，我们现在就有了多个实现方案，比如在input失去焦点的时候触发，input里面的值改变的时候触发，或者你想写个定时器触发都行。

    那on属性怎么使用呢，这可是个大坑。。。我刚开始的时候直接写 ：

on:{

       change: (event) => {

            console.log(event);

         }

        onChange: (event) => {

            console.log(event);

         }

      }

    然而，怎么不触发？？？？写成on-change又会报错。。。。。

    最后，查找资料，发现，我忘了一个很重要的东西。。。那就是 引号 。。。。

on:{

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

            console.log(event);

            console.log(params);

         }

      }

        。。。这还真是vue。。。

    好了，事件触发了，如何绑定到数据里面去呢？我这里采用的是onChange事件来触发，我顺手把render的参数params和事件event打印了出来，在里面找了一下，发现params里面就有row这个属性，应该就是这一行，event里面倒是没有看出什么东西，但是看见有个target，于是就直接用targe来取了dom对象然后调用input的vuleu获取input中的值：

on:{

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

            params.row.count= event.target.value;

         }

      }

    这下该好了把，于是我打了个断点，发现赋值取值都成功了，但是，在我submit的时候我后台拿到data里面居然又没有值了。。。

    这次我是真没有找到解决办法。于是在onchange事件中用this.data取我table的数据data，然后通过params.row.id来找到这一条记录，然后去修改data值。。。终于实现了双向绑定。