使用Ant Design Vue 组件库遇到的坑

清慕
758 阅读4分钟

Ant Design Vue 组件库在做后台项目中是经常被用到的，一个组件库都是需要团队花费大量的时间和精力去维护和迭代，那么也不会是完美的。所以我们在使用中不免会遇到各种各样的bug，下面就来说说我在开发项目中遇到的两个bug或者说是隐藏的坑以及解决方法。

一、Table 表格错位问题

//表格属性columns的部分代码
{
    title: "演练日期",
    dataIndex: "startTime",
    key: "startTime",
    align: "center",
    ellipsis: true,
    customRender: (text) => {
      return text ? moment(text).format("YYYY-MM-DD") : "-";
    },
  },
  {
    title: "是否超期",
    dataIndex: "drillStatus",
    key: "drillStatus",
    align: "center",
    ellipsis: true,
    customRender: (text) => {
      return text == '1' ? "是" : "否";
    },
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "200px",
    align: "center",
    scopedSlots: { customRender: "action" },
  },

image.png 因为最开始的代码是同事写的，我是在后面才接手项目，而在以前也没有遇到过这样的情景，所以也很费解这是什么问题，刚开始以为是同事加了样式问题，因为表格里面的内容大都使用了插槽，然后花了大量的时间去调试他的样式，但是后面发现并没有什么效果，在网上找了好久也是没有关于这个问题的答案，最后想了个笨方法，就是去对比以前正常的项目，看看两者之间有什么不同的写法，后面通过对比其他的代码还真发现不一样的地方，现在的这个项目在错位的列中多了fixed: "right"这样的设置，而当我去掉这个属性时就正常了，发现这个问题之后。

image.png

image.png 马上去看了官方文档关于这个属性的介绍，查了官方文档是这样写的

image.png 当我们设置这个属性时相当于把这一列浮动固定在右边，写css样式的时候我们都知道有个属性固定定位position: fixed;如果给一个元素设置这样式那么元素就会发生浮动脱离文档流独立出来。

所以到这里就知道了问题所在，即当其他列的宽高发生变化时固定的列不会同时发生变化，而是需要通过计算然后进行同步，或许官方有进行处理但没完全处理。因为当我们缩放窗口大小时就会发现固定的列变得跟其他列一样高了，显示在变化的过程中重新进行了计算并同步。

所以当遇到这个问题的时候去掉这个属性就好了，那如果就是需要使用这个属性该怎么办呢，个人建议就是让其他文本的内容不换行，就是设置css样式，使文本超出宽度显示省略号，鼠标移上去显示全部内容。

官方中也有提供一个属性ellipsis，在使用fixed属性时与ellipsis一起搭配使用，这样文本不换行就不会发生错位了。

image.png

二、Tabs 标签页切换宽度异常

Animation.gif

<a-tabs default-active-key="1" @change="callback">
    <a-tab-pane key="1" tab="1111">
        <trackEvent :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="2" tab="2222">
        <emergencyOrg :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="3" tab="33333">
        <disposalPro :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="4" tab="4444">
        <rescuePlan :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="5" tab="55555">
        <transferRecord :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="6" tab="66666">
        <sourcesRisk :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="7" tab="77777">
        <taskAssignment :eventId="eventId" />
    </a-tab-pane>
</a-tabs>

从上面可以发现当我切换tab页的时候宽度会超出页面范围，刷新页面的时候恢复正常，也就是说刚开始是正常的，只是切换之后才发生异常。

看代码时发现tab之间的切换组件会进行缓存，也就是当你切换到其他tab页的时候之前的页面不会被销毁而是被缓存出来，按理说当我切换回来的时候应该是跟原来的一样才对，但结果则不然。在我这个示例中因为我表格的宽度设置的是百分百自适应撑开，当切换tab页是可能是最外层的宽度失效了，导致表格的宽度超出了页面的百分百。

要解决这个问题其实也简单，在每一层的a-tab-pane中加上v-if判断即可，如下

<a-tabs default-active-key="1" @change="callback">
    <a-tab-pane key="1"  v-if="activeKey == '1'" tab="1111">
        <trackEvent :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="2" v-if="activeKey == '2'" tab="2222">
        <emergencyOrg :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="3" v-if="activeKey == '3'" tab="33333">
        <disposalPro :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="4" v-if="activeKey == '4'" tab="4444">
        <rescuePlan :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="5" v-if="activeKey == '5'" tab="55555">
        <transferRecord :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="6" v-if="activeKey == '6'" tab="66666">
        <sourcesRisk :eventId="eventId" />
    </a-tab-pane>
    <a-tab-pane key="7" v-if="activeKey == '7'" tab="77777">
        <taskAssignment :eventId="eventId" />
    </a-tab-pane>
</a-tabs>

处理这个问题的原理就是讲缓存的组件销毁重新创建，这样就不会存在因为缓存而导致宽度异常的问题，但是这是治标不治本，销毁组件重新创建说明需要重新请求数据重新渲染，对项目的性能不利。

但是呢，其他的处理方法我也不知道，只能等研发团队更新版本了，或者你们有更好的解决方案可以米西米西我。

啊~说实话，第一次写这种分析某个知识点的内容，这种文章可以很好的加强自己的记忆。以前也写过几篇文章，但一般都是讲一些技术点的应用，将用法丢上去，然后写一些注意事项跟备注就没了。

avatar
文章
阅读
粉丝