vue.$nextTick 解决了哪些问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转载：https://www.cnblogs.com/xuewuhen/p/7860989.html

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

1.问题

(1).elementui dialog 中的元素通过 this.$refs 获取不到

(2).在第一次进入路由 created() 中操作DOM元素undefined （业务需求一般不这么做）

(3).后台请求完成页面上的数据变化可视化（一般用loading 遮罩但是返回数据较多并不能在后台返回成功之后马上让loading设为false）

2，解决方案

有这样一个需求在 dialog 打开之后就要让后台返回的数据（已勾选）的数据打勾

由于 element table 中没有默认勾选的树形只能用 toggleRowSelection 方法

<template>
<div>
<el-dialog :visible.sync="dialogVisible" size="tiny">
<el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table> </el-dialog> <div style="margin-top: 20px">
<el-button @click="openDialog">打开弹框</el-button>
</div> </div></template><script>
export default {
data() {
return { dialogVisible: false,
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
}, methods: {
openDialog() {
this.dialogVisible = true;
this.toggleSelection([this.tableData3[2],this.tableData3[3]]) },
toggleSelection(rows) {
this.$refs.multipleTable.clearSelection();
if(rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
}
},
}
}
</script>