$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM 這是本文的核心啊！！！超級重要！！！
1.問題
(1).elementui dialog 中的元素通過 this.$refs 獲取不到（視圖未渲染完成）
(2).在第一次進入路由 created() 中操作DOM元素undefined （視圖未渲染完成）
(3).后台請求 完成 頁面上的數據變化
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 弄'
}],
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>
我們在第一次打開彈框的時候，是沒有 勾選上的 ，控制台
$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM
彈出框打開之后 頁面需要加載DOM 然后 在nextTick中調用勾選的方法 頁面渲染完成之后 調用
如果文章對你有幫助，麻煩幫忙點個贊哦！嘿嘿！做一個靠譜的技術博主！