记录一下在 vue3 开发中遇到的问题。
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" />
- 示例: