Vue antd 记坑

本文总结了Ant Design(Antd)在使用过程中遇到的一些常见问题,包括表格内部编辑失去焦点、表单初始值设置、子组件与表格数据同步、rowkey设置以及正则表达式应用。针对这些问题,提出了相应的解决方案,如更改rowkey值、避免div包裹表单组件、利用插槽传递数据以及使用正则判断字符串。同时,也提到了Vuex版本与Vue版本的匹配问题,确保正确安装和使用Vuex。

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

1. Antd可行内编辑表格出现input每点一个就失去焦点,需要重新点击

在上一级的table里rowkey值设置成为该项引起的错误,换一个与输入框无关且唯一的值代替为rowkey

 2. antd表单里的initialvalue在外部组件或其相关容器里不能有div包裹

当表单组件被<></> ,< div></ div> 等包裹时,initialValue设置无效

3. 针对由于将子组件插入到父组件表格里,导致渲染时父子组件一起渲染,子组件拿不到父组件传来的针对某一项表格数据(在生命周期函数里)

由于使用了插槽可以在点击时的show函数里拿到该项数据,这样并不会拿到所有子组件数据,但在生命周期函数中应该仍然使用不了该项数据.

4. Antd表格中的rowkey属性
and表格组件里需要rowkey属性或者key字段来定义主键,常见的表格如果直接落库后端会生成UUID或者将表格中某个唯一的字段设置成rowkey属性,但当表格不落库,且表格中字段无法作为唯一值或者如第一条中所示因其他要求无法作为唯一值,可以给rowkey属性改写成:rowkey=“ 函数“,在函数中返回uuid,

更新:如果如第一条情况一样,直接使用UUID会造成失焦问题,可以加一个判断只有当无key值时才去使用 UUID

5. 字符串利用正则表达式判别非下划线的字符串

New RegExp ('^[^_]+$','g') 

6.解决vuex报错问题

.vuex版本不对,获取不到store,vue默认vue3版本,vuex默认vuex4版本,vuex4只能在vue3中使用,在vue2中能使用vuex3,那么不能默认下载最新的版本

npm install vuex@3 --save

### 如何在 Vue 项目中使用 Ant Design 组件库 #### 安装依赖包 为了能够在 Vue 项目中顺利集成 Ant Design,需要先安装必要的 npm 包。对于 Vue 3 的环境来说,可以通过执行 `npm install ant-design-vue@next` 来获取最新版本的支持[^3]。 #### 配置 Vite 或 Webpack 构建工具 如果采用的是现代前端构建工具链如 Vite,则可以在 vite.config.js 文件内引入特定插件来自动按需加载组件,减少打包体积。具体做法是在终端运行命令 `npm install unplugin-vue-components` 并修改配置文件相应部分以支持此功能[^4]。 #### 初始化全局注册或局部导入组件 有两种方式可以将 Ant Design 组件加入到应用程序当中:一种是通过 main.js 进行全局注册;另一种则是根据页面需求单独引入所需模块,在单个 .vue 文件里声明式地定义它们。前者适合小型应用或者几乎处处都会用到某些基础控件的情况;后者则更适合大型复杂的应用结构,有助于优化性能表现[^1]。 #### 使用 Table 组件实例展示 针对表格类数据呈现的需求,Ant Design 提供了一个非常强大的 Table 组件。它不仅具备丰富的 API 接口用于自定义样式和行为设置,还允许使用者灵活运用 scoped slots 实现列头、单元格等内容的高度定制化处理[^2]。 ```javascript import { defineComponent } from 'vue'; // 局部导入所需的 Ant Design 组件 import { Table, Column } from 'ant-design-vue'; export default defineComponent({ name: 'MyTable', components: { ATable: Table, AColumn: Column, }, }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值