插槽（slot-scope 或 #default）是最常用、最直观的 Element UI 表格自定义列方式，适用于渲染按钮、标签、状态徽章等非文本内容；Vue 2 用 <template slot-scope="scope">，Vue 3 用 <template #default="scope">，均通过 scope.row 访问行数据，需注意语法差异、插槽位置及避免与 prop 冲突。
直接用插槽（slot-scope 或 #default）是最常用、最直观的 Element UI 表格自定义列方式，适合渲染按钮、标签、状态徽章、图片、嵌套组件等非纯文本内容。
明确插槽写法：Vue 2 与 Vue 3 的区别
Element UI（Vue 2）和 Element Plus（Vue 3）语法不同，混用会报错：
-
Element UI（Vue 2）：必须写
<template slot-scope="scope">，内部通过scope.row访问当前行数据 -
Element Plus（Vue 3）：改用具名插槽写法
<template #default="scope">或<template v-slot:default="scope">，同样用scope.row
基础写法：一列一插槽，精准控制内容
不需要额外 props 或封装，直接在 <el-table-column> 内写插槽即可。例如展示带颜色的状态：
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
{{ scope.row.status === 1 ? '启用' : '停用' }}
</el-tag>
</template>
</el-table-column>
关键点：
- 插槽内可自由使用任意 Element 组件（
el-tag、el-button、el-popover等） - 支持访问
scope.row（整行数据）、scope.column（当前列配置）、scope.$index（行索引） - 不写
prop属性，避免与插槽内容冲突
进阶技巧：复用逻辑 + 动态渲染
避免每列都写重复模板，可将渲染逻辑抽成函数或计算属性：
- 在
data或setup中定义一个渲染函数，如renderStatus(row)，返回 VNode（Vue 3）或字符串/组件对象（Vue 2） - 配合
v-if/v-else实现多态渲染，比如“操作列”根据权限显示不同按钮 - 用
scope.row.xxx做空值兜底，如{{ scope.row.name || '-' }}，防止渲染异常
注意事项：别踩这些常见坑
插槽虽灵活，但容易因细节出错：
- 插槽必须写在
<el-table-column>标签内部，不能放在<el-table>下一级 - 如果同时写了
prop和插槽，默认插槽优先，prop不生效 —— 这是设计行为，不是 bug - Vue 3 中若用
defineComponent+ TSX，需用slots.default?.({ row })方式调用，不能直接写 template - 插槽内不要写异步逻辑（如
await），如需请求数据，请提前在mounted或onMounted获取并缓存
