Vue3 开发 Ant Design Vue 问题记录

Amy-1999

已于 2025-04-30 10:01:30 修改

阅读量280

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js typescript

于 2023-02-28 15:17:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45575594/article/details/129260147

文章记录了在Vue3项目中使用AntDesignVue2.2.8版本时遇到的问题，包括Table的customRender处理proxy对象，sorter函数的正确使用，以及自定义表格标题头和Tooltip宽度调整。同时提到了Form表单的非submit提交验证，Modal关闭时去除底部按钮的方法，Button实现路由跳转的方式，以及Select的模糊搜索配置。另外，文章还讨论了Echart5图表的自适应屏幕大小设置。

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

记录一下在 vue3 开发 Ant Design Vue中遇到的问题。

Ant Design Vue ( 2.2.8 )

Table

Column 中 customRender 使用：
- 文档：
- 注意：
  - 如果需要使用 text 的值，使用时需指定 dataIndex 属性，否则取得的 text 会是一个 proxy 对象。
```
{
  title: '创建时间',
  dataIndex: 'createdAt',
  customRender: ({ text }) => moment(text).format('YYYY-MM-DD HH:mm') || '-',
},
```
  - proxy 对象，可使用 toRaw() 方法转为普通对象。
```
import { toRaw } from '@vue/reactivity';
```

Column 中 sorter 函数根据返回值来进行排序，注意时间要用大于号小于号判断：

文档：

示例：

 {
   title: '创建时间',
   dataIndex: 'createdAt',
   slots: { customRender: 'createdAt' },
   sorter: (a, b) => a.createdAt > b.createdAt,
   defaultSortOrder: 'descend', // 默认排序
   width: '15%',
 },

table 标题头自定义图标

slots 属性中添加 title 配置：

示例：

// column 属性配置。
 columns: [
   { 
    dataIndex: 'name',
    slots: { customRender: 'name', title: 'myTitle' },
    width: '25%',
   },
   ...
 ],

<!-- 自定义样式 -->
<template #myTitle>
   <span>
     姓名
   </span>
   <Tooltip :title="name" arrow-point-at-center placement="rightTop">
     <InfoCircleOutlined />
   </Tooltip>
</template>
<template #name="{ record }">
  {{ record.name || '-' }}
</template>

注意： columns 中需要去掉 title 属性。

Tooltip

更改 tooltip 宽度。

示例：

<Tooltip
  arrow-point-at-center
  placement="rightTop"
  :overlay-style="{ width: '380px', maxWidth: 'unset !important' }"
>
 ...
</Tooltip>

Form

不使用 Form 表单自带的 submit 事件提交时，可通过 ref 手动调用 Form 表单校验。

示例：

<!-- From 设置 ref 属性 -->
<Form
  ref="myForm"
  :rules="rules"
  :model="myForm"
>
  ...
</Form>

onSubmit(){
  const currentForm = this.$refs.myForm as any;
  try {
    await myForm.validate();
  } catch (error) {
    return;
  }
  ...
 }

Modal

通过 footer 属性去掉底部按钮：
- 文档：

示例：

<Modal
  :visible="visible"
  :title="my modal"
  :centered="true"
  :footer="null"
  @cancel="onClose"
>
 ...
</Modal>

Button

点击 Button 实现路由跳转
- 方式一：使用 <router-link> 跳转，类似渲染成一个 <a> 标签，浏览器会自动跳转，并且在历史记录中生成一条记录。
```

<router-link :to="{ name: 'xxx' }">
  <Button />
</router-link>
```
- 方式二：点击 Button 时调用 this.$router.push()。
```
<Button @click="onToXXXPage" />
```
```
onToXXXPage(){
  this.$router.push({ name: 'xxx' });
}
```

Select

设置模糊搜索时匹配对应的 label：optionFilterProp="label"

文档：

示例：

<Select
  v-model:value="value"
  :options="options"
  show-search
  option-filter-prop="label"
/>

Echart5

图表自适应屏幕大小 :autoresize="true"

示例：

<!-- 直接使用 auto-resize 不起作用 -->
<VueECharts
  ref="chart"
  :option="option"
  :autoresize="true"
/>