vue输入框无法渲染

我查了各种解决方法,都试过了,但是不行,打断点发现是在flushCallbacks函数里被清空了,而这个时候我的刷新已经执行完毕了,所以最后没有渲染上,有大佬知道是什么原因吗?

img

异步操作要获取的返回的数据注意需要在回调中获取,外部获取需要用async+promise+await来实现。

而且注意flushCallbacks回调函数的this作用域,比如是vue中的methods方法,不用使用箭头函数申明

测试了下没问题啊?formTable数据是axios动态获取的还是什么?

<style>
@import url("https://unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
 
    .el-table .warning-row {
        background: oldlace;
    }
 
    .el-table .success-row {
        background: #f0f9eb;
    }
 
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
    <template>
        <el-form>
            <el-table :data="tableData"
                      style="width: 100%"
                      :row-class-name="tableRowClassName">
                <el-table-column prop="date"
                   v-bind="item" 
                   v-for="(item,index) in col"
                   :accesskey="`col_${index}`">
                    <template slot-scope="{row,$index}">
                        <el-form-item>
                            <span v-if="item.component=='span'&&item.prop==='index'">{{$index+1}}</span>
                            <span v-if="item.component=='span'&&item.prop!=='index'">{{row[item.prop]}}</span>
                            <el-input v-if="item.component=='input'" v-model="row[item.prop]"></el-input>
                            <select v-if="item.component=='select'" :type="item.selects" v-model="row[item.prop]">
                                <option value="王小虎">王小虎</option>
                                <option value="张三">张三</option>
                            </select>
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </template>
</div>
<script>
    var Main = {
        methods: {
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
        mounted() {
            setTimeout(() => {
                this.tableData = [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1511 弄',
                }, {
                        date: '2016-05-04',
                        name: '张三',
                        address: '上海市普陀区金沙江路 1512 弄'
                    }]
            }, 2000)
        },
        data() {
            return {
                col: [
                    { component: 'span', prop: 'index' },
                    { component: 'span', prop: 'date' },
                    { component: 'select', prop: 'name', selects:'single' },
                    { component: 'input', prop: 'address' }
                ],
                tableData: []
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

img

看下你的代码