商品对比表格单元格个性化定制的核心是利用vue作用域插槽，通过scope.row和column.field动态渲染价格、库存、评分等字段，并复用函数式渲染、统一布尔值图标、空值兜底及状态差异化交互，同时扩展表头与空状态插槽以保持整体一致性。
商品对比表格中单元格内容的个性化定制，核心在于利用 Vue 的作用域插槽，让每一列能根据商品属性（如价格、库存、评分）动态渲染不同样式和交互逻辑，而不是写死模板或重复判断。
用 #default 插槽绑定行数据与列字段
在 <el-table-column></el-table-column> 或 <vxe-column></vxe-column> 内直接使用具名插槽，通过 scope.row 访问当前商品数据，配合 scope.column.field 或显式传入的列标识，精准控制渲染逻辑：
-
<el-table-column label="价格"></el-table-column><template></template><span :class="{ 'price-sale': scope.row.discount }">¥{{ scope.row.price }}</span> - 对 vxe-table，写法类似：
<template row column></template>，可进一步用column.field === 'stock'区分列类型 - 避免同时设置
prop和插槽——插槽会覆盖 prop 渲染，这是预期行为，不是 bug
按属性类型复用渲染逻辑
不建议每列都手写一套 <el-tag></el-tag> 或 <el-progress></el-progress>，而是把通用逻辑抽成函数或计算属性：
- 在
setup()中定义renderScore = (val) => h(ElRate, { score: val, disabled: true })，然后在插槽内调用renderScore(scope.row.score) - 对“是否支持”类布尔字段，统一用
<el-icon><check></check></el-icon>或<el-icon><close></close></el-icon>，加 class 控制颜色 - 对空值做兜底：
{{ scope.row.weight || '-' }}或v-if="scope.row.weight"避免渲染异常
结合状态做差异化展示
同一列在不同商品间可能需不同交互，比如“操作”列：
- 根据
scope.row.status显示不同按钮：v-if切换启用/停用按钮，或禁用已下架商品的操作项 - 用
<el-popover></el-popover>封装“查看详情”，避免表格过宽；用<el-tooltip></el-tooltip>提示“仅限 VIP 商品”等附加说明 - 价格列可嵌套
<el-tag type="danger">促销</el-tag>，配合scope.row.isPromo动态控制
扩展：表头与空状态也用插槽统一风格
不只是单元格，整个对比体验要一致：
- 表头加筛选图标：
<template><div class="header-with-filter">{{ column.label }}<el-icon><search></search></el-icon> </div></template> - 空状态提示自定义：
<template><div class="empty-tip">暂无支持对比的商品</div></template> - 若用 vxe-table，还可借助
#header-cell插槽为特定列添加排序箭头或 Tooltip
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
