vue+elementui实现el-table中显示图片

1、table中显示图片2、当需要遍历图片时，不能直接使用prop绑定值3、一张图片<el-table-column label="头像">　　<template slot-scope="scope">　　　　<img :src="scope.row.img" width="40" height="40" class="head_pic"/>　　</tem

卡洛背心

11052人浏览 · 2020-08-28 16:43:21

卡洛背心 · 2020-08-28 16:43:21 发布

使用Element实现在table表中显示图片：

1、一张图片

<el-table-column label="头像">
　　<template slot-scope="scope">
　　　　<img :src="scope.row.img" width="40" height="40" class="head_pic"/>
　　</template>
</el-table-column>

效果如下：
在这里插入图片描述

2、多张图片

<el-table-column prop="pictures" label="描述图片">
　　<template scope="scope">
　　　　<img v-for="item in scope.row.pictures" :src="item" width="40" height="40" class="head_pic"/>
　　</template>
</el-table-column>

效果如下：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^