Vue el-table表格水平放置样式

---

一、介绍

记录 vue+element 中el-table表格的数据，展示样式代码
如图：水平展示数据

二、代码展示

方法一（推荐）

html代码

<el-table-column prop="字段名" label="列名" width="250">
	<template #default="scope">
    	<div style="display: flex;">
	        <div>
	        	<!-- 圆图：border-radius:50px;margin: 5px 5px 0px 0px; -->
            	<el-image :src="图片地址" style="width:60px; height:60px" ></el-image>
            </div>
            <div>
            	<div class="user-item">
                    <span>文本内容</span>
                </div>
                	<div class="user-item">
                	<span><el-tag type="info">标签内容</el-tag></span>
             	</div>
        	</div>
    	</div>
	</template>
</el-table-column>

class样式代码

<style lang="less" scoped>
	.user-item{
	    margin-top: 5px;
	    height: 20px;
	    margin-left: 10px;
	    font-size: 10px;
  	}
</style>

该方法可以很好的适应页面大小的改变，改变页面大小，不容易出现样式变动

方法二（不推荐）

栅格： el-row el-col
row 行概念

1 <el-row></el-row>

col 列概念

1 <el-col></el-col>

这里不做更多介绍，简单的了解一下栅格即可

<el-table-column prop="字段名" label="列名" width="250">
	<template #default="scope">
    	<el-col :span="12">
         	<img :src="图片路径" width="80px" height="80px"/>
        </el-col>
        <el-col :span="12">
        	<p>展示内容</p>
	        <p><el-tag type="info">标签内容</el-tag></p>
	    </el-col>
	</template>
</el-table-column>

注意

• 无需css样式代码，也可以在表单中使用
• 缺点：受页面宽度影响，不建议在表格中使用
• 这里是以换一种思维的方式来实现样式（纯属个人喜好）

三、后记

一个初学者对 vue+element 的使用，然后保存的方法