在el-table中放置el-image
时间: 2024-09-24 12:01:22 浏览: 72
在Element UI的`el-table`组件中插入`el-image`,通常用于显示表格行中的图片。你可以通过在表格数据的某个字段添加`<el-image>`标签来实现。这里是一个基本的例子:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="avatar" label="头像">
<template slot-scope="scope">
<el-image :src="scope.row.avatar" :size="mediumSize" />
</template>
</el-table-column>
<!-- 其他列... -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ avatar: 'https://elementui.github.io/public-assets/images/user.png', ... },
{ avatar: 'https://elementui.github.io/public-assets/images/user2.png', ... },
// 更多数据...
],
mediumSize: '80px' // 图片大小,默认值可以自定义
};
}
};
</script>
```
在这个例子中,`avatar`字段会映射到`el-image`的`src`属性,展示对应的图片。`size`属性控制了图片的大小。
阅读全文
相关推荐
















下列是“我的订单”页面,为什么给“评价”按钮添加一个“评论”对话框,整个页面就会消失不显示?<template> 我的订单({{ ordersData.length }}个) <el-table :data="ordersData" strip> <el-table-column label="商品图片" width="120px"> <template v-slot="scope"> <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg" :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image> </template> </el-table-column> <el-table-column prop="orderId" label="订单编号" width="140px"></el-table-column> <el-table-column prop="goodsName" label="商品名称" :show-overflow-tooltip="true" width="140px"> <template v-slot="scope"> {{scope.row.goodsName}} </template> </el-table-column> <el-table-column prop="businessName" label="店铺名称" :show-overflow-tooltip="true" width="100px"> <template v-slot="scope"> {{scope.row.businessName}} </template> </el-table-column> <el-table-column prop="goodsPrice" label="商品价格"> <template v-slot="scope"> {{scope.row.price}} / {{scope.row.goodsUnit}} </template> </el-table-column> <el-table-column prop="num" label="商品数量"></el-table-column> <el-table-column prop="price" labe


