liang14658fox

Appearance

模仿element给element的表格添加loading ​

  • loading样式，使用时要配合外层div
css
.box {
	/* 这里设置转动圆圈的大小 */
	height: 40px;
	width: 40px;
	background: white;
}

.box .circle {
	stroke-width: 2;
	stroke: #409eff;
	stroke-linecap: round;
}

/* 旋转动画 */
@keyframes rotate {
	to {
		transform: rotate(1turn)
	}
}

/* 弧线动画 */
/* 125 是圆的周长 */
@keyframes circle {
	0% {
		/* 状态1: 点 */
		stroke-dasharray: 1 125;
		stroke-dashoffset: 0;
	}

	50% {
		/* 状态2: 圆 */
		stroke-dasharray: 120, 125;
		stroke-dashoffset: 0;
	}

		to {
		/* 状态3: 点（向旋转的方向收缩） */
		stroke-dasharray: 120 125;
		stroke-dashoffset: -125px;
	}
}

.box {
	/* ...同上 */
	animation: rotate 2s linear infinite;
}

.circle {
	/* ...同上 */
	animation: circle 2s infinite;
}
.box {
	/* 这里设置转动圆圈的大小 */
	height: 40px;
	width: 40px;
	background: white;
}

.box .circle {
	stroke-width: 2;
	stroke: #409eff;
	stroke-linecap: round;
}

/* 旋转动画 */
@keyframes rotate {
	to {
		transform: rotate(1turn)
	}
}

/* 弧线动画 */
/* 125 是圆的周长 */
@keyframes circle {
	0% {
		/* 状态1: 点 */
		stroke-dasharray: 1 125;
		stroke-dashoffset: 0;
	}

	50% {
		/* 状态2: 圆 */
		stroke-dasharray: 120, 125;
		stroke-dashoffset: 0;
	}

		to {
		/* 状态3: 点（向旋转的方向收缩） */
		stroke-dasharray: 120 125;
		stroke-dashoffset: -125px;
	}
}

.box {
	/* ...同上 */
	animation: rotate 2s linear infinite;
}

.circle {
	/* ...同上 */
	animation: circle 2s infinite;
}
  • loading样式，直接放到element表格中：
html
<div class="loading_table_fatherBox">
	<!-- 使用v-if控制显示，不要忘记在data里加上 -->
	<div v-if="myself_loading" class="myself_loading">
		<svg viewBox="25 25 50 50" class="box">
			<circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
		</svg>
	</div>
	<!-- element表格 -->
	<el-table :data="tableData" stripe border style="width: 100%">
		<el-table-column prop="date" label="日期" width="180">
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180">
		</el-table-column>
		<el-table-column prop="address" label="地址">
		</el-table-column>
	</el-table>
</div>
<div class="loading_table_fatherBox">
	<!-- 使用v-if控制显示，不要忘记在data里加上 -->
	<div v-if="myself_loading" class="myself_loading">
		<svg viewBox="25 25 50 50" class="box">
			<circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
		</svg>
	</div>
	<!-- element表格 -->
	<el-table :data="tableData" stripe border style="width: 100%">
		<el-table-column prop="date" label="日期" width="180">
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180">
		</el-table-column>
		<el-table-column prop="address" label="地址">
		</el-table-column>
	</el-table>
</div>

TIP

需要配置给表格设置父级div，表格同级div放入loading。

设置相对位置，透明度，背景颜色，显示层级。

css
.myself_loading {
	z-index: 1300;  /* 调节显示优先级 */
	position: absolute;  /* 必选 */
	background-color: #ffffff;  /* 调节背景颜色至舒适 */
	opacity: 0.85;  /* 调节透明度直至舒适 */
	width: 100%;  /* 必选 */
	height: 100%;  /* 必选 */
	display: flex;  /* 居中 */
	align-items: center;  /* 居中 */
	justify-content: center;  /* 居中 */
	border: 1px solid #cccccc;  /* 可选 */
}

.loading_table_fatherBox {
	position: relative;  /* 必选 */
	padding: 0px;  /* 必选 */
	margin-top: 0px;
	top: 0px;
}
.myself_loading {
	z-index: 1300;  /* 调节显示优先级 */
	position: absolute;  /* 必选 */
	background-color: #ffffff;  /* 调节背景颜色至舒适 */
	opacity: 0.85;  /* 调节透明度直至舒适 */
	width: 100%;  /* 必选 */
	height: 100%;  /* 必选 */
	display: flex;  /* 居中 */
	align-items: center;  /* 居中 */
	justify-content: center;  /* 居中 */
	border: 1px solid #cccccc;  /* 可选 */
}

.loading_table_fatherBox {
	position: relative;  /* 必选 */
	padding: 0px;  /* 必选 */
	margin-top: 0px;
	top: 0px;
}