<template v-if="item['type'] === 'img'"> <el-table-column :label="item.label" :prop="item.prop" align="center"> <template slot-scope="scope"> <el-image style="width: 50px; height: 50px" :src="scope.row.goodurl" ></el-image> </template> </el-table-column> </template>这段代码中如何将goodimg给替换成通用的图片属性
时间: 2024-02-14 17:07:59 浏览: 44
在这段代码中,`scope.row.goodurl` 表示当前行的 `goodurl` 属性,如果要将其替换成通用的图片属性,只需要将 `:src="scope.row.goodurl"` 改成 `:src="scope.row.img"` 即可。修改后的代码如下:
```
<template v-if="item['type'] === 'img'">
<el-table-column :label="item.label" :prop="item.prop" align="center">
<template slot-scope="scope">
<el-image style="width: 50px; height: 50px" :src="scope.row.img"></el-image>
</template>
</el-table-column>
</template>
```
这样就可以通用地显示不同表格中的图片属性了。
相关问题
<el-table :data="tableData" stripe size="medium" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="goodName" label="图书名称"></el-table-column> <el-table-column prop="price" label="图书单价"></el-table-column> <el-table-column prop="num" label="图书数量"></el-table-column> <el-table-column prop="img" label="图片"> <template v-slot="scope"> <el-image :src="scope.row.img" style="width: 100px; height: 100px"></el-image> </template> </el-table-column> 添加注释
这是一个使用了 Element UI 中的 el-table 组件展示数据的代码片段,其中:
- data 属性绑定了一个名为 tableData 的数组,用于存储要展示的数据。
- stripe 属性设置为 true,表示表格显示斑马线样式。
- size 属性设置为 medium,表示表格大小为中等。
- @selection-change 事件绑定了一个名为 handleSelectionChange 的方法,用于处理表格中选中行的变化。
- el-table-column 组件用于定义表格的列,其中 type="selection" 表示该列为复选框列,prop 属性指定了该列对应数据对象的属性名,label 属性指定了该列的表头名称,width 属性设置了该列的宽度,sortable 属性设置为 true,表示该列可以排序。
- 在第四列中,添加了一个插槽(slot),用于自定义该列的内容。在该插槽中,使用了 el-image 组件展示了图片。通过 scope.row.img 获取了该行数据对象中 img 属性的值,并将其作为 el-image 组件的 src 属性值。
<template> <el-table :data="tableData" style="width: 100%" stripe ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}"> <el-table-column prop="id" label="编号" sortable /> <el-table-column prop="img" label="图片url" sortable /> <el-table-column prop="img" label="缩略图"> <template v-slot="products"> <img :src="products.row.img" min-width="70" height="70"/> </template> </el-table-column> <el-table-column prop="image" label="图片" min-width="20%" > <!-- 图片的显示 --> <template #default="scope"> <!--<img :src="scope.row.img" min-width="70" height="70" />--> </template> </el-table-column> <el-table-column align="center" label="图片url"> <template v-slot="products"> <!--<img :src="require('../file/img/' + item)" v-for="item in list" :key="item" alt="">--> <el-image style="width: 100px; height: 100px" :src="products.row.img" ></el-image> <!--<img :src="require(''+products.row.img)" style=" width:100px; height:100px" />--> </template> </el-table-column> </el-table> </template> <script setup> import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue' let { proxy } = getCurrentInstance(); import router from '@/router' onMounted(()=>{ getTableData(); }); //获取表单信息 let tableData = ref([]); function getTableData() { proxy.$http.get('/ImgController/imgFind') .then(res => { tableData.value=res.data; console.log(res.data) }) .catch(err => { console.log(err) }); } </script> <style scoped> </style>修改以上代码,是他能够显示图片
在模板中,你已经将图片的 url 显示在表格中了,但是在显示图片时,需要注意以下几点:
1. 确定图片的 url 是否正确,可以通过控制台检查图片 url 是否可以访问。
2. 确认图片的路径是否正确,这里使用了相对路径,需要确认相对路径是否正确。
3. 确认图片是否过大,可以在 img 标签中设置 width 和 height 属性,或者使用 el-image 组件,控制图片大小。
在代码中,有三个地方需要修改:
1. 第一个 el-table-column 中,图片已经正确显示,不需要修改。
2. 第二个 el-table-column 中,需要将注释的 img 标签打开,同时添加 width 和 height 属性,用于控制图片大小。
```html
<el-table-column prop="image" label="图片" min-width="20%">
<!-- 图片的显示 -->
<template #default="scope">
<img :src="scope.row.img" width="70" height="70" />
</template>
</el-table-column>
```
3. 第三个 el-table-column 中,需要使用 el-image 组件,同时设置宽度和高度。
```html
<el-table-column align="center" label="图片url">
<template v-slot="products">
<el-image style="width: 100px; height: 100px" :src="products.row.img"></el-image>
</template>
</el-table-column>
```
这样就可以正确显示图片了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)