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

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

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

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


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


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


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


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


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

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


相关推荐
Highcharts.js1 天前
Highcharts 主流前端框架无缝集成指南
前端·vue.js·前端框架·highcharts·可视化图表
2601_953988072 天前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·后端·物联网·tcp/ip·数学建模·前端框架
console.log('npc')2 天前
大型前端项目的文档驱动协作实践:从混乱到有序
前端·前端框架
console.log('npc')2 天前
React 19 + Vite 企业级前端项目:从零搭建到规范交付
前端·react.js·前端框架
光影少年2 天前
react离线缓存、图片缓存方案
开发语言·前端·javascript·react native·react.js·缓存·前端框架
我命由我123452 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
懒人wsh3 天前
axios 封装那点破事:401 无感刷新踩过的坑
前端框架
阿懂在掘金3 天前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架
xexpertS3 天前
前端工程转型实践:从 Ember 迁移到 React,提升构建速度与研发效能
前端·react.js·前端框架
霹雳桃3 天前
移动端 H5 折叠屏适配实战:为什么 max-width 没用,min(vw, px) 才是正解
前端·前端框架