Vue3 开发指南

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

• Ant Design Vue 文档 ( 2.2.8 )
• Echart5 文档

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"
    />
    

END