arco-design vue table的封装 父子组件传递事件

最新推荐文章于 2025-04-27 12:22:40 发布
原创 最新推荐文章于 2025-04-27 12:22:40 发布 · 468 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue3中将原生表格封装成组件，重点讨论了如何在子组件中定义接收的事件名，以及父组件如何实现处理函数并获取当前record。通过实例说明了如何在父子组件间传递函数并处理参数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习笔记

vue3 父组件定义接收方法的函数 子组件传递方法

当前遇到的问题

对表格进行封装

1、原来的表格

现在把a-table封装成个人的组件 如何传递函数和处理参数呢？

解决方法：

1、子组件定义可以接收的事件名

这里定义完了之后就可以在父组件使用@editRecord、@switchStatus等操作了

2、父组件实现了这里对应的方法，但是这里处理函数需要对单行操作，也就是需要获取到当前的record

那么在父组件中

这里的参数不用在父组件传递 而是由子组件传递 传递方法如下：

总结：

Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
资深程序员
02-19 7190
vue3，elementplus，el-table，table表格，取消表格行row移入高亮效果，elementplus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
Vue3 - Arco Design Vue 表格组件a-table“表格行数据中又嵌套了二维对象数组“，按平级循环渲染(嵌套数组视为同级行数据)， 对嵌套的数组循环展示为表格，智能合并行或列详细教程
资深程序员
07-02 2458
vue3，nuxt3，arco-design-vue，table表格组件，a-table，vue3arco表格组件，平常都是数组中一个对象渲染成一行，每行中还有嵌套数组怎么办，每个行数据下还有一个数组怎么显示，怎么把表格相同的数据合并为一行，合并上下两行相同数据单元格，合并行或列如果遇到相同单元格就合并为一个，合并上下两行相同数据单元格，数据中有二维数组怎么遍历循环显示，表格数据带二级数组怎么循环渲染显示，表格数据中存在一个数组要怎么才能显示到表格，a-table表格合并详细教程示例，table表格如果对
采用 Vue3 Vite5 TypeScript Arco-Design编写的中后台框架 全面的系统配置，优质模板，常用组件
06-15
【项目资源】：包含前端、后端、移动开发、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源，毕业设计等各种技术项目的源码。包括C++、Java、python、web、C#、EDA等项目的源码。 【适用人群】：适用于希望学习不同技术领域的初学者或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
基于 vite5.x + vue3.x + arco-design2.x 全新的前端框架 vue-admin-arco
03-07
对比其他开源 admin 框架有如下优势: 1. 支持前端控制路由权限 intelligence、后端控制路由权限 all 模式 2. 已知开源 vue admin 框架中首家支持 mock 自动生成自动导出功能 3. 提供 50 余项全局精细化配置 4. 支持 scss 自动排序，eslint 自动修复 5. axios 精细化封装，支持多数据源、多成功 code 数组，支持 application/json;charset=UTF-8、application/x-www-form-urlencoded;charset=UTF-8 多种传参方式 6. 支持登录RSA加密 7. 支持打包自动生成7Z压缩包 8. 支持errorlog错误拦截 9. 支持多主题、多布局切换 使用注意事项: 1. 项目默认使用lf换行符而非crlf换行符，新建文件时请注意选择文件换行符 2. 项目默认使用的最严格的eslint校验规范（plugin:vue/recommended），使用之前建议配置开发工具实现自动修复（建议使用vscode开发） 3. 项目使用的是要求最宽泛的MIT开源协议，保留MIT开
Element UI、Ant Design、Arco Design与Naive UI：企业级UI组件库深度解析
chenchuang0128的博客
04-27 1706
在前端开发的浪潮中，UI组件库作为加速开发进程、确保界面一致性的关键工具，其选择直接关系到项目的开发效率、用户体验及后期维护成本。本文深入剖析Element UI、Ant Design、Arco Design及Naive UI四大企业级UI组件库的特点、优势、劣势、适用场景及应用案例，旨在为开发者提供一份详尽的选型指南。
Arco-Design Table组件二次封装（自用）
m0_48995032的博客
12-27 3900
在日常开发表格较多频繁使用，这里是尽量减少冗余代码。在使用表格的页面引入组件。
Vue3: Slot插槽透传,二次封装Arco的table组件
西魏陶渊明的博客
04-16 3577
这里我们要用一个vue3中的API，`useSlots()`, 我们要用这个api来判断父组件是否传递了插槽。 - 从slots中获取父组件传的插槽信息,如果没有则就使用 `arco` 中默认的。即正常展示。当自定义了插槽, 就选择插槽的内容。 - 插槽的参数传递是 ` v-slot:[key]="{ record, rowIndex, column }"` 这里的参数是 `arco` 中传递的。 - 然后我们在透传给我们的自己的插槽。`:name="key" v-bind="{ rowIndex: ro
vue3项目中使用Arco Design-Table组件结合h()函数生成表格嵌套表格效果
huangfuyk.的博客
01-27 2306
Vue3项目中使用Arco Design-Table组件结合vue3-h()函数生成表格嵌套表格效果...
a-table 传当前行的索引
我爱美女S的博客
09-22 1438
a-table传当前行的索引
Arco-Design + Vue3 封装通过JSON数组类型配置表单组件
m0_48995032的博客
07-06 4189
import {// 表单json配置项 formJson : {type : Array , } , // 表单校验规则 rules : {type : Object , } , // 表单数据 formState : {// ref绑定组件 const tableForm = ref < FormInstance >();} as any);const {/*** 表单过滤，特殊业务场景需要，没有则可以删除** 用于条件判断是否通过表单条件展示需要的内容});
多多OJ评测系统 前端项目环境初始化 安装Vue脚手架 引入Arco Design组件
热门推荐
温柔半两，从容一生
07-18 9万+
推荐的node js版本为为18 或者 16。其实我们脚手架已经帮我们做到了。我们首先试着引入一个组件试试看。我们在前端工程化的时候实际上。加到main.ts文件里面。我们打开webStorm。我们有一些代码规范的校验。就说明我们的项目引入成功。npm版本为9.5.1。配置脚手架后我们先运行。接下来要引入相关的组件。监测一下是否安装成功。要去重新配置环境变量。我们这边能获取到网址。代表的是项目运行成功。选择用npm进行安装。我们建议的是完整引入。
vue3 ant-design-vue 封装上传图片组件
weixin_44565776的博客
05-22 1354
“vue3 封装上传图片组件;
arco-design-vue封装高质量表单组件
05-13
arco-design-vue 是一个基于 Ant Design 设计语言的 Vue 组件库，其中也包括了许多高质量的表单组件。这些表单组件在设计和功能上都非常优秀，可以帮助开发者快速构建出美观、易用的表单界面。 其中，arco-design-...
arco-design表格二次封装，支持表头配置和表格导出，并增加插槽支持扩展
weixin_43472754的博客
08-26 864
【代码】arco-design表格二次封装，支持表头配置和表格导出，并增加插槽支持扩展。
基于 Arco Design UI 封装的 Modal 组件
昔人'
12-10 976
在日常开发中，Modal 是一个使用频率非常高的 UI 组件。基于 这篇文章 的启发，我编写了一个基于 Arco Design UI 的 Modal 组件封装。我们通过 document.createElement(‘div’) 创建了一个 DOM 容器，并在 document.body 中插入，以便动态渲染 Modal。如果 onOk 返回一个 Promise，则在弹窗确认按钮点击时，显示 loading 状态；通过 update 函数，可以动态更新配置，比如设置 confirmLoading 状态。
Arco Design Vue初探——表格可扩展、模态框嵌套表单确定前处理记录
qq_32944491的博客
12-16 4005
一.表格可扩展自定义，用JSX或者h 函数解决； 二.模态框a-modal嵌套a-form,使用确认事件@ok校验逻辑不走直接关闭模态框，将@ok 更改为@before-ok 事件
Vue父子组件之间传值问题
锦鲤(⑉°з°)--♡的博客
08-05 316
在Vue框架中，最大的特点就是组件化，也就是说组件调用组件，而这两个组件又有联系，所以难免出现父子组件的传值问题。在Vue项目中，父子组件传值的出现频率会比较高。 父子组件传值分为：父组件向子组件传值和子组件向父组件传值这两种情况。 1. 父组件向子组件传值： 父组件要向子组件传值，首先把要传递的值绑定到子组件中，这里绑定的是activeName值。 在子组件中用props接收父组件传递过来的...
【vue3】vue3接收props以及emit的用法
????鱼干～
07-27 1685
vue3子组件接收props以及通过emit方法传值父组件。
VUE3 单页面组件之间的传值 详解
06-21 3575
VUE3 单页面组件的定义和组件之间的传值详解。需要注意的事项
@arco-design/theme-line@0.0.3 requires a peer of @arco-design/web-react@^2.23.4 but none is installed. You must install peer dependencies yourself
最新发布
07-09
<think>我们正在解决一个npm包安装时的peer依赖缺失问题。用户遇到的错误信息是： `@arco-design/theme-line@0.0.3 requires a peer of @arco-design/web-react@^2.23.4 but none is installed` 这个错误表明，用户安装的`@arco-design/theme-line`版本0.0.3要求项目中必须安装`@arco-design/web-react`包，且版本需要满足`^2.23.4`（即>=2.23.4且<3.0.0）。但是当前项目中没有安装这个包，或者安装的版本不满足要求。 ### 解决步骤 #### 1. 确认当前项目中是否安装了`@arco-design/web-react` 首先，我们需要检查项目中是否已经安装了`@arco-design/web-react`以及其版本。可以通过以下命令查看： ```bash npm list @arco-design/web-react ``` 或者，查看`package.json`文件中的`dependencies`或`devDependencies`部分。 #### 2. 安装或更新`@arco-design/web-react` 根据检查结果，进行相应操作： - **如果未安装**：安装指定版本的`@arco-design/web-react`。 ```bash npm install @arco-design/web-react@^2.23.4 ``` - **如果已安装但版本不满足**：更新到满足要求的版本。 ```bash npm install @arco-design/web-react@^2.23.4 ``` #### 3. 重新安装`@arco-design/theme-line` 在确保`@arco-design/web-react`安装正确后，重新安装`@arco-design/theme-line`（如果之前安装失败）： ```bash npm install @arco-design/theme-line ``` 或者，如果之前已经安装但出现警告，现在peer依赖已经满足，警告应该会消失。 #### 4. 使用`--legacy-peer-deps`（可选，不推荐） 如果由于某些原因无法安装指定版本的peer依赖（例如与其他依赖冲突），可以尝试使用`--legacy-peer-deps`标志忽略peer依赖的检查。但这不是推荐做法，因为它可能导致运行时错误。 ```bash npm install @arco-design/theme-line --legacy-peer-deps ``` #### 5. 检查其他peer依赖 有时，可能还有其他的peer依赖缺失。请根据安装时的警告信息，逐一解决。 ### 注意事项 - 确保`package.json`中`@arco-design/web-react`的版本满足要求（即`^2.23.4`）。 - 如果使用yarn，可以使用`yarn add`命令，它默认会处理peer依赖。但遇到问题也可以使用`yarn add --ignore-peer`（类似npm的`--legacy-peer-deps`）。 - 如果项目使用了npm 7或更高版本，npm默认会安装peer依赖，所以正常情况下应该会自动安装。但在这个案例中，错误提示表明peer依赖没有安装，可能是因为用户使用了`--legacy-peer-deps`安装过其他包，或者手动忽略了peer依赖。 ### 示例操作流程 假设项目中没有安装`@arco-design/web-react`： 1. 安装`@arco-design/web-react`： ```bash npm install @arco-design/web-react@^2.23.4 ``` 2. 安装`@arco-design/theme-line`： ```bash npm install @arco-design/theme-line ``` 这样，peer依赖满足，错误应该解决。 ### 相关问题 1. 如何理解npm中的peer依赖？ 2. 除了安装指定版本，还有哪些方法解决peer依赖冲突？ 3. 在npm 7及以上版本中，peer依赖的处理方式有什么变化？</think>### 解决 @arco-design/theme-line 的 peerDependencies 缺失问题 这个错误表示 `@arco-design/theme-line@0.0.3` 需要依赖 `@arco-design/web-react@^2.23.4`，但你的项目中未安装该依赖或版本不兼容。以下是完整解决方案： #### 1. 安装指定版本的 peerDependency ```bash # 安装精确匹配的版本 npm install @arco-design/web-react@2.23.4 # 或安装兼容版本 (^2.23.4 表示 >=2.23.4 且 <3.0.0) npm install @arco-design/web-react@^2.23.4 ``` #### 2. 检查版本兼容性 ```bash # 查看已安装版本 npm list @arco-design/web-react ``` 确保输出版本满足 $ \geq 2.23.4 $ 且 $ < 3.0.0 $ #### 3. 更新 package.json (推荐) 在 `dependencies` 中添加： ```json "@arco-design/web-react": "^2.23.4" ``` 然后执行： ```bash npm install ``` #### 4. 强制安装方案 (不推荐) 如果存在版本冲突，临时方案： ```bash npm install @arco-design/theme-line --legacy-peer-deps ``` ⚠️ 注意：这可能导致运行时错误 #### 5. 验证解决方案 安装后检查警告是否消失： ```bash npm install --no-audit # 观察输出中是否还有peer依赖警告 ``` ### 根本原因解析 1. **peerDependencies机制**：npm 7+ 版本默认安装peer依赖，但需满足版本约束 $ \text{version} \in [2.23.4, 3.0.0) $[^1] 2. **版本不匹配场景**：当项目中存在其他依赖要求不同版本的 `@arco-design/web-react` 时会发生冲突 3. **设计原理**：主题包需要与指定版本的组件库协同工作，确保API兼容性 ### 相关问题 1. 如何查看项目中所有缺失的 peerDependencies？ 2. 当多个依赖要求不同版本的 peerDependency 时，如何解决冲突？ 3. npm 的 `--legacy-peer-deps` 和 `--strict-peer-deps` 有什么区别？ 4. 在 monorepo 项目中如何管理 peerDependencies？ [^1]: npm 官方文档关于 peerDependencies 的说明 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#peerdependencies
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值