vue3前端开发,element-plus前端框架探秘:scope对象

vue3前端开发,element-plus前端框架探秘:scope对象!我们经常需要对当前行的数据进行操作,比如增加,删除,编辑等,为此我们需要传递当前行所对应的唯一主键,通常情况下,当前行对应的业务主键是id属性。scope是elementplus框架封装好了一个一个对象。

这个封装好的对象,可以给我们直接拿来使用。比如它里面包含了什么内容呢

我们给大家在控制台打印一下。看看scope对象到底封装了些什么内容?


如图,我们定义了一个按钮,观察scope。点击它触发一个控制台打印。内容可能会让你意外哦。


按理说,大家会觉得,我点击第一行的按钮。打印出来的内容,应该是第一行的数据信息。这样是正常人的理解。实际上,scope对象,不仅仅是包含了某一行的内容,它包含了整个list集合的内容。


如图,可以看见,row是scope对象的一个子属性。 里面包含了当前行对应数据的各个字段数据。


当我们打开下面的_self下面的子属性的时候,会发现,其实它里面包含了所有的集合数据。


当我们只是传递scope.row时,自定义函数接收到的参数传递过来的就是那个代理对象proxy的内容。

它携带的数据是被封装在了Object对象里面了。


相关推荐
光影少年14 小时前
react状态管理都有哪些及优缺点和应用场景
前端·react.js·前端框架
梦帮科技17 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
C澒18 小时前
前端整洁架构(Clean Architecture)实战解析:从理论到 Todo 项目落地
前端·架构·系统架构·前端框架
C澒18 小时前
Remesh 框架详解:基于 CQRS 的前端领域驱动设计方案
前端·架构·前端框架·状态模式
C澒19 小时前
前端分层架构实战:DDD 与 Clean Architecture 在大型业务系统中的落地路径与项目实践
前端·架构·系统架构·前端框架
晚霞的不甘21 小时前
守护智能边界:CANN 的 AI 安全机制深度解析
人工智能·安全·语言模型·自然语言处理·前端框架
AAA阿giao1 天前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
晚霞的不甘1 天前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
百锦再1 天前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
这儿有一堆花1 天前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架