vue+elementui进阶之路-el-table中显示图片

Posted congfeicong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"/>
  </template>
</el-table-column>

4、多张图片

<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+elementui进阶之路-el-table中显示图片的主要内容,如果未能解决你的问题,请参考以下文章

elementUI+vue-cli el-table=》excel

Vue + ElementUI 之el-table的二次封装,带条件查询及翻页功能

vue elementUI实现el-table 复选框默认选中,默认禁用,默认选中且禁用等效果

vue+ElementUI——表格分页(前端实现方法)

vue elementUI实现el-table点击行单选, 点击行多选,点击复选框单选效果

vue+elementui table表格点击单元格单元格改变背景色