vue2中table插槽新语法 v-slot

v-slot = "{ row }"Vue 2.6+ 的新语法,官方推荐,更简洁、可读性更好。slot-scope="scope" 是老写法,功能等价,但写法啰嗦,未来会被淘汰。

示例对比:

bash 复制代码
<!-- 新语法 -->
<el-table-column v-slot="{ row }">
  <span :class="dayClass(row.mtkyts)">{{ row.mtkyts }}</span>
</el-table-column>

<!-- 老语法 -->
<el-table-column slot-scope="scope">
  <span :class="dayClass(scope.row.mtkyts)">{{ scope.row.mtkyts }}</span>
</el-table-column>
对比点 v-slot="{ row }"(新) slot-scope="scope"(旧)
Vue 版本 ≥ 2.6 所有 2.x
写法 直接解构,一行搞定 先取 scope,再 scope.row
可读性 模板里只看到 row 到处都是 scope.xxx
官方态度 推荐,长期支持 已废弃,3.x 不再支持
性能 相同 相同
相关推荐
Highcharts.js9 小时前
如何下载使用Highcharts Grid 开发web可编辑表格
前端·人工智能·grid 表格·web 表格·在线编辑表格·highcharts表格安装·表格开发工具
用户629605932470510 小时前
从“浏览器根本区分不了”到真正实现:刷新不退出,关闭标签页自动退出,前端判断浏览器关闭和刷新
前端
qetfw10 小时前
MWU:Vue 3 + FastAPI 的 MaaFramework 跨平台 WebUI 源码
前端·vue.js·python·fastapi·开源项目·效率工具
mfxcyh10 小时前
Vue3+Ant Design Vue 实现手动异步文件上传(含大小校验、弹窗上传)
前端·javascript·vue.js
wordbaby10 小时前
Web端热敏标签打印完整解决方案(QZ Tray + 译维A42)
前端
swipe10 小时前
03|Axios 请求进了后端之后:Controller、Request、Response 是怎么接住它的?
前端·后端·全栈
meilindehuzi_a10 小时前
Vue3进阶基础:指令修饰符、v-model表单绑定、动态样式、计算属性与侦听器实战
前端·javascript·vue.js
csdn2015_10 小时前
vue 前端运行命令
前端·javascript·vue.js
swipe10 小时前
02|从 `pnpm dev` 到 Spring Boot 启动:后端服务到底怎么跑起来?
前端·后端·全栈
swipe10 小时前
01|前端人第一次打开 Spring Boot 项目,应该先看哪里?
前端·后端·全栈