1. Problem
Explanation: The table table cannot display the picture problem
The url address is displayed in the brand logo, so we need to use the scoped slot.
<template slot scope="{row,$index}"> </template>
Description: Uses Vue's slot functionality, allowing custom HTML to be added over the current column's content. Slots can contain arbitrary Vue expressions and DOM elements. Here we've used a simple slot that will render the current row's data object ( { { row }} ) as well as the current column's index ( { { $index }} ).
As can be seen from the above figure, row represents the data of each row of data, and $index refers to the index of the array!
2. Solution
<el-table-column prop="logoUrl" label="品牌logo" width="width" align="center">
<template slot scope="{row,$index}">
<img :src="row.logoUrl" alt="" style="height: 100px" />
</template>
</el-table-column>
:src is to make the value inside the quotation marks a variable (one-way binding in vue), and style is to set the size of the image!
3. Part of the source code display
<el-table style="width: 100%" border :data="list">
<el-table-column type="index" prop="prop" label="序号" width="85px" align="center">
</el-table-column>
<el-table-column prop="tmName" label="品牌名称" width="width"> </el-table-column>
<el-table-column prop="logoUrl" label="品牌logo" width="width" align="center">
<template slot scope="{row,$index}">
<img :src="row.logoUrl" alt="" style="height: 100px" />
</template>
</el-table-column>
<el-table-column prop="prop" label="操作" width="width"> </el-table-column>
</el-table>
<script>
export default {
name: "tradeMark",
data() {
return {
// 列表展示的数据
list: [],
};
}
mounted() {
// 获取列表中函数和方法
this.getPageList();
},
methods: {
// 获取品牌列表的数据
async getPageList() {
// 解构出参数
const { page, limit } = this;
let result = await this.$API.trademark.reqTradeMarkList(page, limit);
console.log(result);
if (result.code == 200) {
// 总共的页数,和展示的条数
this.total = result.data.total;
this.list = result.data.records;
}
},
},
}
</script>