this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
例如:
<a-table
:columns="columns"
:data-source="professorList"
:pagination="pagination"
:rowKey="(record, index) => index"
@change="tableChange"
>
<span slot="action" slot-scope="record">
// 编辑已有信息
<a @click="editProfessorModal(record)" disabled>编辑</a>
</span>
</a-table>
editProfessorModal(record) {
// 使用this.$nextTick
this.$nextTick(() => {
setTimeout(() => {
this.editForm.setFieldsValue({
name: record.name,
school: record.school,
college: record.college,
type: record.type,
region: record.region,
artNum: record.artNum
})
})
})
// 此时打开modal对话框,成功获取到数据
this.editProfessorVisible = true
}