vue.$nextTick 解決了哪些問題

  $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>

　　咱們在第一次打開彈框的時候，是沒有 勾選上的 ，控制檯

  $nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後使用 $nextTick，則能夠在回調中獲取更新後的 DOM  

      彈出框打開以後 頁面須要加載DOM 而後 在nextTick中調用勾選的方法  頁面渲染完成以後 調用 

其餘問題 相似 就不過多累述；