Vue 2 中用作用域插槽实现表格列自定义渲染，核心是通过 slot-scope 将当前行数据传给父组件以灵活控制列内容，无需修改子组件逻辑；需在 el-table-column 内使用 template[slot-scope]，避免与 prop 冲突，并注意容错处理和动态列配置。
Vue 2 中用作用域插槽实现表格列自定义渲染，核心是通过 slot-scope 把当前行数据传给父组件，让父组件决定每列怎么显示。不需要改子组件逻辑，也不用写重复判断，直接在模板里写业务需要的按钮、标签或组合结构即可。
基础写法：一列一个 slot-scope
在 <el-table-column> 内部用 <template slot-scope="scope"> 声明作用域插槽，scope.row 就是当前行完整数据对象：
- 必须写在
<el-table-column>标签内部，不能放在<el-table>上 -
scope还提供scope.$index（行索引）、scope.column（当前列配置）等常用字段 - 不要同时设置
prop属性，否则会和插槽内容冲突，导致文本重复或渲染异常
常见列类型示例
状态列用 el-tag 渲染带颜色标签：
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 'active' ? 'success' : 'warning'" size="small">
{{ scope.row.status === 'active' ? '启用' : '停用' }}
</el-tag>
</template>
</el-table-column>
操作列绑定事件，直接传 scope.row 或具体字段：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
@click="handleEdit(scope.row)"—— 编辑整行 -
@click="handleDelete(scope.row.id)"—— 删除只传 ID - 加
.native.stop防止事件冒泡影响表格行点击
避免硬编码：配合列配置统一管理
把列定义抽成数组，每个对象带 prop 和可选的 slotName，再用 v-for 渲染列（注意：不是遍历插槽，而是遍历 <el-table-column>）：
- 列配置示例：
columns: [{ prop: 'name', label: '姓名' }, { prop: 'status', label: '状态', slotName: 'status' }] - 模板中：
<el-table-column v-for="col in columns" :key="col.prop" :label="col.label" :prop="col.prop"> - 插槽名可动态写为
v-slot:[col.slotName || 'default']，但 Vue 2 不支持方括号语法，需改用slot="status"硬写或封装子组件处理
兜底与容错处理
实际项目中某些列可能没配插槽，要防止空白或报错：
- 空值保护：
{{ scope.row.name || '-' }}或{{ scope.row.avatar ? `url(${scope.row.avatar})` : '/default.png' }} - 条件渲染插槽内容：
<template v-if="scope.row.status" slot-scope="scope">...</template> - 默认内容写在插槽外部，比如加个
<span v-else>-</span>作为 fallback
