display: contens的使用

display：contents的使用

首先display是一个css属性，常见的属性值有block，inline-block，none，flex等，这些属性值的效果就不一一赘述了，这里主要讲解一下display值为contents时的效果

display: contents;使得元素在布局上“透明”，不占据任何空间，它允许元素本身不生成任何盒模型，但保留其子元素的正常渲染与布局。

使用场景：

<template>
	...
	<el-row>
		<template v-for='i in arr' :key='i.id'>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
		</template>
	</el-row>
</template>

由于el-col的渲染有很多中情况要进行判断筛选进行不同的展示，因此无法直接在el-col上进行循环再判断(这里的原因就不多赘述了)，我原先的做法是在外部包了一层template，在template标签上进行for循环，因为template是虚拟标签，并没有生成展示的dom

注：这种情况使用template是可以的

但在合并项目分支时有警报问题提醒：template标签上不允许设置key属性（如果使用并没有该问题就可以直接使用template标签），因此我用div标签去替换了template标签，但造成了一个问题：

<template>
	...
	<el-row class='flex flex-wrap'>
		<div v-for='i in arr' :key='i.id'>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
		</div>
	</el-row>
</template>

el-col设置了 :span ，但div并没有被span的宽度撑开

原因：在element-plus中，el-col组件依赖于其父组件el-row的布局系统来正确计算宽度，在外部嵌套一个div，会导致el-col的span属性无法正确应用，从而影响布局

这里解决办法：使用div标签，但让div并不影响子元素的显示与布局

display: contents;帮我很好的解决了这个问题，既不用template标签，由没有影响el-span的布局

<template>
	...
	<el-row class=''>
		<div v-for='i in arr' :key='i.id' style='display:contents'>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
			<el-col v-if='要满足的条件'>.....</el-col>
		</div>
	</el-row>
</template>

优势：(百度提供)

1.清理不必要的容器

可以让被设置该属性的容器在视觉上消失，并且不影响其子元素的布局和样式，例如：在列表项 <li>中使用display:contents可以移除列表项默认的内外编剧，同时保持列表的语义完整性

2.增强表格布局的灵活性

在表格布局中，<table>、<tr>、<td>等元素遵循严格的布局规则。通过为某些或<td>设置display: contents，可以实现更灵活的布局调整，比如合并单元格的效果，同时保持表格的语义结构‌

3.简化堵在的DOM结构

在复杂的页面布局中，使用display: contents可以简化多层嵌套的容器结构，使代码更加清晰和易于维护‌