我查了各种解决方法,都试过了,但是不行,打断点发现是在flushCallbacks函数里被清空了,而这个时候我的刷新已经执行完毕了,所以最后没有渲染上,有大佬知道是什么原因吗?
异步操作要获取的返回的数据注意需要在回调中获取,外部获取需要用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>
看下你的代码