放大镜功能在el-table不显示图片,控制台报 :[Vue warn]: Component is missing template or render function. 警告,引入封禁库都是正确的
<template>
<div>
<!-- 筛选器 -->
<el-form :model="filterForm" inline>
<el-form-item label="关键词">
<el-input
v-model="filterForm.keyword"
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item label="分类">
<el-select v-model="filterForm.category" placeholder="请选择分类">
<el-option
v-for="category in categories"
:key="category.id"
:value="category.id"
:label="category.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="applyFilter">筛选</el-button>
</el-form-item>
</el-form>
<!-- 列表 -->
<el-table :data="filteredProducts" border>
<el-table-column type="index" width="55" label="序列" />
<el-table-column label="商品图片" width="200">
<template v-slot="{ row }">
<div style="width: 175px; height: 175px">
<zoom-on-hover :img-normal="row.img1"> </zoom-on-hover>
</div>
</template>
</el-table-column>
<el-table-column prop="proname" label="商品描述"></el-table-column>
<el-table-column prop="brand" label="品牌"></el-table-column>
<el-table-column prop="sales" label="销售量"></el-table-column>
<el-table-column prop="stock" label="库存"></el-table-column>
<el-table-column prop="originprice" label="价格"></el-table-column>
<!-- 其他列... -->
</el-table>
</div>
</template>
<script>
import api from "@/api";
import zoomOnHover from "@/utils/zoomOnHover/zoomOnHover.js";
import "@/utils/zoomOnHover/zoomOnHover.css";
export default {
name: "ProIndexView",
components: {
//VueMagnifier,
zoomOnHover,
},
data() {
return {
productData: [],
product: null,
filterForm: {
// 筛选表单数据
keyword: "",
category: "",
}, // 商品列表数据
categories: [], // 商品分类数据
filteredProducts: [],
// 新增:筛选后的商品列表数据
};
},
created() {
api.pro.ProList().then((response) => {
console.log(response);
if (response.code == 200) {
this.productData = response.data;
this.applyFilter();
}
});
},
computed: {},
methods: {
applyFilter() {
// 应用筛选条件,更新筛选后的商品列表数据
const keyword = this.filterForm.keyword.trim();
const category = this.filterForm.category;
let filtered = this.productData;
if (keyword !== "") {
filtered = filtered.filter((product) =>
product.proname.includes(keyword)
);
}
if (category !== "") {
filtered = filtered.filter((product) => product.total === category);
}
this.filteredProducts = filtered; // 将筛选结果赋值
},
},
};
</script>
<style></style>
你template 都有了 为啥不在辛苦辛苦 把 img组件加上