v-loading 修改 z-index | Jalen's Blog = Follow your heart = A happy life

	<template>
	<div :id="id"
	:class="className"
	:style="{height:height,width:width}"
	v-loading="loading"
	element-loading-text="Loading"
	element-loading-spinner="el-icon-loading"/>
	</template>
	<script>
	export default {
	created() {
	this.getChartData()
	},
	methods: {
	getChartData() {
	this.loading = true
	postRequest({
	url: '/api/charts',
	method: 'post',
	data: {
	fromDate: this.timeRange[0],
	toDate: this.timeRange[1]
	}
	}).then(res => {
	this.loading = false
	this.lineData = res.data
	this.initChart()
	}).catch(error=> {
	this.loading = false
	this.$message({
	type: 'error',
	message: 'Request error, try again!'
	});
	})
	}

	... ...
	}
	}

上面是一个子组件，在父组件初始化时，即刚进页面时，加载该子组件，该子组件会先执行 create (),

在 create () 方法内有调用 ajax 请求到后端，请求过程中显示 loading，发现此时 v-loading 遮罩默认显示在所有 div 的最上层，

且此时滚动鼠标滑轮，发现遮罩层会向上挪动从而覆盖上部菜单栏，

F12 后发现 v-loading 组件样式属性的 z-index 为 2000，太大，调整为 8 时正好，即需要修改 z-index 属性，

尝试从 css 里写样式覆盖，发现不行，暂时修改如下，但是这样写每个组件都要加 mounted，比较啰嗦，后期有时间在找找其他方法

	mounted() {
	this.$nextTick(() => {
	let loadingNode = document.getElementsByClassName('el-loading-mask')
	for (let i = 0; i < loadingNode.length; i++) {
	loadingNode[i].style.zIndex = 8
	}
	})
	}