vue2 + iview Table 嵌入文本框失去交单

Question

各位大神，用vue2 + iview 做一套界面，在table 中嵌入了Input
每次修改Input的值，都会失去焦点，多次调试以后，发现是修改了值以后，该了数据源，然后数据源就会重新把Table 加载一遍，得到的界面，已经不是原来的界面了，换成element ui 是没有这个问题的，
代码如下，希望大神能帮我想想办法

<link rel="stylesheet" type="text/css" href="iview.css">
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="iview.min.js"></script>
<script type="text/javascript" src="axios.min.js"></script>
<div id="app">
    <div class="search">
        <i-input v-model="table_name" placeholder="请输入表名" style="width:200px"></i-input>
        <i-button @click="query" type="primary">查询</i-button>
        <i-button @click="createCode" type="primary">生成代码</i-button>
    </div>
    <i-table class="table" :columns="columns" :data="dataList" size="small" ref="selection"></i-table>
</div>
<script>
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    new Vue({
        el: '#app',
        data: function () {
            const that = this;
            return {
                columns: [
                    {type: 'selection', align: 'center', width: '40'},
                    {title: '表名', key: 'table_name'},
                    {title: '注释', key: 'comments'},
                    {
                        title: '类名', key: 'class_name',
                        render: (h, params) => {
                            return h('i-input', {
                                props: {size: 'small', value: params.row.class_name},
                                on: {
                                    input: (value) => {
                                        that.dataList[params.index].class_name = value;
                                    }
                                }
                            });
                        }
                    },
                    {
                        title: '类中文名', key: 'cn_name',
                        render: (h, params) => {
                            return h('i-input', {
                                props: {size: 'small', value: params.row.cn_name},
                                on: {
                                    "on-change": (event) => {
                                        console.log(event);
                                         // params.row.cn_name = event.target.value; 这么写不能获得数据
                                           that.dataList[params.index].cn_name = event.target.value; //这么写就一定失去焦点
//                                     //    event.target.select();
                                    }
                                }
                            });
                        }
                    },
                ],
                dataList: [],
                table_name: null,
            };
        },
        created: function () {
            this.query();
        },
        methods: {
            query() {
                axios.post("/code/queryList", JSON.stringify({"table_name": this.table_name})).then(res => {
                    this.dataList = res.data;
                }).catch(res => {
                    this.$Message.error({content: '加载表信息败!' + res});
                });
            },
            createCode() {
                if (this.$refs.selection.getSelection().length == 0) {
                    this.$Message.warning({content: '请至少选择一条记录.'});
                    return;
                }
                axios.post("/code/create", JSON.stringify(this.$refs.selection.getSelection())).then(res => {
                    this.$Message.success({content: '生成代码成功.'});
                }).catch(res => {
                    this.$Message.error({content: '生成代码失败,请检查代码是否已经存在!' + res});
                });
            }
        }
    });
</script>
<style>
    #app {
        padding: 10px;
    }

    .search {
        padding-bottom: 10px;
    }
</style>

希望有大神帮忙解决一下