element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？

这里以此代码片段为例说明一则bug，请bug对号入座。（bug截图省略）

页面的栅格缩放，导致页面布局发生叠加错位？

---

一、坑1 · 引言： （先来一则bug代码）

<el-card v-for="(resume,key) in resumes" :key="key" class="item" shadow="hover">
	<el-row>
		<el-col :span="4">
			<div class="box1">
			    <div class="pic" v-if=" resume.sex === 'M'">
					<img src="../../../static/images/default-gg.png" class="thumb-hd">
				</div>
				<div class="pic" v-else-if="1===1">
					<img src="../../../static/images/default-mm.png" class="thumb-hd">
				</div>
				<p class="clr-1a">{{resume.resumeName}}</p>
			</div>
		</el-col>
		<el-col :span="8">
			<div class="box2">
				<p class="clr-1a">{{resume.jobIntention}}   &nbsp;&nbsp;  {{resume.salaryExp}}K &nbsp;&nbsp;  {{resume.jobWantedState}}</p>
				<p class="clr-666">{{resume.seniority}}年   &nbsp;&nbsp; {{resume.location}}   </p>
				<p class="clr-b2">{{resume.education}}   &nbsp;&nbsp; {{resume.birthday}}岁 &nbsp;&nbsp;  {{(new Date(resume.updateDate)).getMonth()+1}}月{{(new Date(resume.updateDate)).getDate()}}日&nbsp; {{(new Date(resume.updateDate)).getHours()}}时</p>
			</div>
		</el-col>
		<el-col :span="10">
			<div class="box3">
				<!-- 注释1： 注意查看下面的特殊字符 &npsp; -->
				<p class="clr-1a"> &nbsp; <span class="pull-r">{{resume.phone}}</span>   </p>
				<p class="clr-555">{{resume.remarks}}</p>
			</div>
		</el-col>
		<el-col :span="2" class="pos-rel">
			<div class="button pos-abl">
				<div class="btn1"> <el-button type="primary" size="" plain @click="open3">举报</el-button></div>
				<!-- <div class="btn2"> <el-button type="primary" size="" plain @click="open2">收藏</el-button></div> -->
			</div>
		</el-col>

	</el-row>
</el-card>

注意上面的代码：
【注释1】 部分的&npsp;，因为有该特殊字符，所以页面style样化在自动缩放的时候局部出现了紊乱的布局bug。

解决办法：

• 只需要将它删除就没有了。

---

二、坑2 · （再来第二则bug）

问题描述：

• 单页面.vue文件的<style>样式：如果它没有设置 <style scoped>（scoped 约束仅对当前页面样式有效），那么在你访问了同样class定义规则的相关页面之后返回，也会有可能造成目标页这样的bug !

解决办法：

• 出现这样的异常bug，就需要你自己研究一下css的优先级，自己去解决了。

  这个没有什么经验，不再赘述，请留意。

---

三、坑3 · 最坑（再来第三则bug：一般不会出现这个问题!）

问题描述：

• vuejs的编译打包是不是会把一些css类重新定义封装？？？ （ 傻坑？！）

解决办法：
如果真是这样的bug，真需要研究一下css的编译方式，

这里罗列几点需要注意的技巧和编写代码的规范。

• 技巧1：
  规范代码，采用vuejs分页面模块打包，这样每个页面的scoped单独加载，相同样式.class类名可以在另外的一个页面通过二次绑定.class2类名，来进行区分，懒加载渲染。

  • 若局限于使用这种策略，可以参考vuejs专栏相关文章（vuejs分模块加载/vuejs页面懒加载技术）。

• 技巧2：
  如果引入的是.vue文件命名后封装的组件（比如我自己的indexMenu.vue导航组件，暂称为‘子文件’），可以在引入文件（暂称为：父文件；如index.vue）内分别定义<style></style>和<style scoped></scoped>；这样可以将“子文件”内的需要变换的样式定义在<style>中，有必要的话，可以使用技巧1进行辅助绑定样式。

• 技巧3：
  实在修改不定或者搞不了的，就不要使用上述两种技巧了，可以把带码拉出来一起写（不要分多个文件，或者使用相同的class类名），定义新的classl类，在<style>中进行改动。

• 技巧4：
  使用原生js、jQuery操作dom元素，达到速成效果（注意此处的if和else闭环逻辑，以便于满足来回切换样式的需求，【具体代码示例：省略】）。

如后期有更多经验，会继续补充，请留言提议。

• 如果你也有类似问题或处理经验，欢迎留言分享与交流。

---

以上就是关于“ element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？ ” 的全部内容。