码迷,mamicode.com
首页 > 其他好文 > 详细

el-table 表格循环多张图片

时间:2020-05-08 19:53:35      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:list   rev   col   nbsp   tail   preview   view   利用   review   

 <el-table :data="weekList" stripe tooltip-effect="dark" class="table">
        <el-table-column
          v-for="(item, index) in tableOrderItem"
          :key="index"
          :width="item.width"
          :prop="item.prop"
          :label="item.label"
          align="center"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
          <template v-if="item.prop === ‘commodityDetails‘">
            <div v-html="scope.row.commodityDetails"></div>
          </template>
          <!-- 图片有多张的情况 先分隔为数组 然后利用v-for 遍历得到 src  -->
          <template v-else-if="item.prop === ‘picture1‘">
            <div v-for="(item,index) in scope.row.picture1.split(‘,‘)" :key="index" class="table-flex">
              <el-image style="width: 50px; height: 50px; margin-right: 10px;" :src="imgUrl+item" :preview-src-list="[imgUrl+item]"></el-image>
            </div>
          </template>
          <template v-else>
            {{scope.row[item.prop]}}
          </template>
          </template>
        </el-table-column>
      </el-table>

 

el-table 表格循环多张图片

标签:list   rev   col   nbsp   tail   preview   view   利用   review   

原文地址:https://www.cnblogs.com/guangzhou11/p/12852638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!