使用 Ant Design Vue踩过的那些坑

一些头脑不清醒的吐槽：真的没有人觉得Ant Design Vue很难用吗？？？官方文档很拉跨啊？？？难道是我道行太浅？？？
仅以此博客记录使用 Ant Design Vue踩过的那些坑#￥%&*@

组件引入问题

之前写项目的时候，经常遇到因为组件引入而导致打包有问题，使用的时候也不报错，但是到打包就会报错，一排查，结果提示某个组件找不到，但是又明明引入了，这里简单举两个我遇到的问题：

• RangePicker的引入

正确引入：

import { DatePicker} from 'ant-design-vue';

正确使用：

<DatePicker.RangePicker v-model:value="time"  value-format="YYYY-MM-DD" />

• Textarea的引入

正确引入：

import { Input} from 'ant-design-vue';

正确使用：

<Input.Textarea  style="margin: -10px 0px;" />

Ant design表格行高设置问题

关于行高设置尝试了很多方法，but根本不生效，后来发现，原来要通过table的size属性设置
size属性一共有三个值：large | middle | small

<Table :columns="columns" :data-source="dataSource" size='small'>

Ant design表格表头背景色设置

这一趴真是被坑惨了，用了好多个方法（只要是网上能找的），怎么设置都没用，甚至开发者模式打开，找到对应的元素位置去设置background-color都不生效，打算要放弃的时候，它又柳暗花明又一村了，咱也不知道怎么个事儿，先记录一下吧

设置从antd引入的表格表头的背景色和字体大小：

/deep/ .ant-table-thead .ant-table-cell{
  background-color: #dde9ff ;
  font-weight: bold;
}

不加.ant-table-cell不生效，/deep/也是一定要加的，不加不生效，这个/deep/意思是深度选择器，允许你去修改antd本身的样式

补充：
设置表格中各行的样式

/deep/.ant-table-tbody>tr>td {
  background-color: #f3f8fe;
}

后记

后续会不定时补充，欢迎各位小伙伴提意见~~~