听劝，放弃ant-design-vue组件库吧

一个从业八年半的前端这次想认（简）认（简）真（单）真（单）吐槽下ant-design-vue组件库。我现在公司前端项目用的都是ant-design-vue。上家单位的技术栈也是VUE, 但是组件库采用的是element-ui。刚开始接触ant-design-vue时，我还有点惊讶，没想到ant-design系列还有vue的版本，之前我默认ant design是react用的。现在ant-design-vue也接触有三年了，我将重点吐槽下两个很不喜欢的组件a-form和a-table。

1. a-form

刚入职那会，我发现项目里用的都是a-form，然后代码里有随处可见getFieldsValue，setFieldsValue，有时候还需要用异步nextTick嵌套一下达到页面立即更新渲染的效果。作为前端小组长，代码评审是我的日常工作，我非常重视code review。这是毕业进入一家外企工作给我带来的一个算是比较好的习惯，外企真的非常重视代码质量，没有被approve的merge是被禁止合并到主分支的。回到关于a-form代码评审，代码评审次数多了以后，看到这些低效的表单在操作代码，我就在想没有更好的办法了吗？然后我就打开ant-design-vue的官方文档，找到了a-form-model表单：

看到第二句支持双向绑定时，总算是找到一些安慰了，终于能和element-ui一样支持双向绑定了。在后面为了让团队成员改掉习惯，在新页面就统一要求表单使用a-form-model组件。一开始大家并不是立马就能改掉这个习惯的，因为功能类似的话，大家会习惯去拷贝老页面的代码，不得不承认有些表单还是比较复杂，重新用新组件写的话会花更多时间，但是我认为还是有必要去用新的a-form-model，刚开始虽然可能会增加一些工作量，但是后期肯定是收益的。体验到双向绑定的好处后，我们还慢慢重写了一些老的表单。

下面一起来看下搜索表单在分别使用a-form和a-form-model两个组件下的代码对比(场景是选完某个检索项下拉框触发查询)：

// a-form 代码示例
<a-form-item
    label="系统名称"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
     <a-select>
        placeholder="搜索系统"
        v-decorator="['systemname']"
        @change="onSystemChange"
     />
 </a-form-item>
 onSystemChange () {
      this.$nextTick(() => {
        this.onSearch()
      })
    }

// a-form-model 代码示例
<a-form-model-item
  label="系统"
  :label-col="labelCol"
  :wrapper-col="wrapperCol"
>
 <a-select>
        placeholder="搜索系统"
        v-model="searchParams.systemname"
        @change="onSearch"
     />
</a-form-item>

从上面两端代码可以看出使用a-form非双向绑定的表单想要在下拉框选完值后立即触发查询是需要在查询回调外面包裹一层nextTick异步才行，如果搜索栏有很多个检索项，那就需要写很多个nextTick，是不是非常低效，不符合现代前端框架模式呀！

2.a-table

说到a-table，先要说下背景，由于我们项目用的是vue2,所以ant-design-vue我们用的是1.7.8的版本。相对于vue2对应可使用的elemen-ui版本的el-table组件，两者最大的差别在于a-table不支持列宽的自主伸缩。由于有需求提出要支持列的伸缩，一开始我们首先尝试的是去找相关插件，例如vue-draggable-resizable，但是这个插件用起来拉伸的时候有点卡顿，使用不流畅，所以最后还是放弃了。然后我印象中element-ui的table是支持的，查看了官方文档确实是支持的。最后我们采取的解决方案是在使用ant-design-vue的基础上额外引入element-ui的table组件，局部引入仅用到的组件。最后一共引入了以下5个element-ui组件。

import { Table, TableColumn, Pagination, Loading, Tooltip } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

另外el-table的列属性可以设置最小宽度，这个a-table没有。a-table只能设置固定宽度，空间有剩余的时候会根据各列宽度按比例分配，不设置宽度时是平均分配剩余空间。我遇到一个需求是，只想设置某一列获取剩余空间，但是需要保证最小宽度，这个用a-table无法实现。只让某列获取剩余空间在a-table中就是不设置宽度，这在有剩余空间时没问题，但是在小屏幕空间不够时，不设置宽度的列会分配不到宽度导致看不见这一列。对于这种场景，el-table再一次完胜！

3.总结

以上就是我用ant-design-vue遇到一些坑，如果你的项目是VUE2的版本，我强烈推荐你用element-ui组件库。对于VUE3的话，对应ant-design-vue版本已经支持表格可伸缩列，minWidth等属性。具体选择用哪一套组件库，建议先做对比调研再决策，希望你自己不要给自己挖坑。