一、产生的原因

有时候，针对分页图片列表，使用table的实现不够友好，需要自己去实现。

二、思路

1、定义大的div，这个包裹里面div的动态加载，并布局这个div里面的属性如自定义布局

2、定义一个小的div，这个div包裹图片

3、定义一个动态的class，作为选中后的样式显示

三、代码实现

重点代码：

v-for="item in this.thumbList" :key="item.id"

:class="{'activeImg':currentIndex === item.id}"

<el-dialog :visible.sync="thumbVisible" title="选择缩略图" width="63%">
	<div class="thumb">
	  <div v-for="item in this.thumbList" :key="item.id" style="padding: 10px 5px 10px 5px; width: 110px;height: 110px;">
		<div :class="{'activeImg':currentIndex === item.id}">
		  <el-image :src="item.url" @click="selectBtn(item)" style="cursor:pointer;width: 100px;height:100px;"></el-image>
		</div>
		<div style="width: 100%;display:inline-flex;justify-content:center;">
		  <span class="thumbMedia">{
   
   {item.id}}</span>
		</div>
	  </div>
  </div>
  <el-row>
	<!--工具条-->
	<el-pagination
	  @size-change="thumbSizeChange"
	  @current-change="thumbCurrentChange"
	  :current-page="thumbPageNum"
	  :page-sizes="[10, 20, 30, 40]"
	  :page-size="thumbPagesize"
	  layout="total, sizes, prev, pager, next, jumper"
	  :total="thumbTotal">
	</el-pagination>
  </el-row>
  <el-row style="margin-top: 10px;display: flex;justify-content: center;">
	<el-button @click="comfirmSel">选择</el-button>
	<el-button @click="cancelThumb">取消</el-button>
  </el-row>
</el-dialog>

相关的样式及方法

样式：

 .thumb{
    margin-bottom:20px;
    height: 300px;
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow :auto;
  }
  .activeImg{
    border-style:solid;
    border-width:3px;
    border-color:#FFFF00;
  }

.thumbMedia{
      display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
      overflow: hidden; /*超出的文本隐藏*/
      text-overflow: ellipsis; /* 溢出用省略号*/
      -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
    }

thumbMedia 类的作用：复制时保留完整的字段值

方法：

selectBtn(item){

this.currentIndex = item.id;

this.videoForm.thumbId = item.id;

this.imageUrl = item.url;

},

图片效果：

四、涉及技术

flex布局、js、css

flex布局好的文章 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html