1. 如何引入icon
 
首先安装
npm install --save @ant-design/icons-vue
 
然后引入
import { CloudDownloadOutlined } from '@ant-design/icons-vue’;
 
 
接着注册
 
最后使用即可
 

 
2. ant-desgin-vue的分页和日期组件如何设置为中文?
 
 分页设置中文
 
先引入
 
接着注册
 
用ConfigProvider 把a-pagination 分页组件包裹起来,并绑定动态属性:locale=zh_CH
 
记得vue3.0需要返回
 
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import { ConfigProvider } from 'ant-design-vue';
 
<div>
<ConfigProvider :locale="zh_CN">
<a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
</ConfigProvider>
</div>
 
日期组件设置中文
 
先引入
 
 
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN’;
 
绑定动态属性
 
最后不要忘了返回
 
 

3. table组件自带的分页如何取消,固定表头如何设置
设置该属性即可 :pagination=“false”
 
设置固定表头
添加该属性 :scroll="{ y: 240 }”
 
注:作用是固定表头,并添最大高度为240,这个高度为自定义,也可设置为auto,超过该高度就出现滚动条
 

 
4. ant-desgin-vue的树形组件如何设置自定义图标
 
如下图,使用icon自定义图标,然后可以直接img插入图片,或插入引入字体图标
可以根据key加上v-if判断父级和子级前面是否显示图标

  


 
4. 鼠标指向树形组件每一行,hover整行后,整行都能显示背景颜色
 
 
可以设置该属性blockNode 或 block-node
 
5.如果不仅需要在hover时,还想要点击选中某行后,也能显示整行背景色
 
没有提供该属性,并且点击选中某行时,给下面父子级类都设置了点击选中后的效果
 
父级类:ant-tree-treenode-selected
子级类:ant-tree-node-selected
 
因为选中之后都设置了样式,要想实现选中子级也跟hover一样,颜色显示整行,
需要把子级上面子级类设置为transparent,然后给上面父级类在设置hover后的颜色,
这样子级类被去掉了默认样式,点击选中某行时,就只会显示父级类的样式了
 

 
6. 如果只想在树形结构展开时在显示每行前面的图标,可设置expanded属性,如下图注释
 
 

 
7. 如果想要去掉表格的外边框和列边框
 
不要设置bordered属性,下图为设置该属性的效果
 
去掉该属性之后
 
如果想要全部去掉,剩下的border需要去覆盖原本css了,没有提供去掉全部border的属性
 

 
9. ant-design-vue的组件如何设置css样式
 
行内样式和去掉<style scope>里的scope可以,但不推荐,前者不利于阅读和后期修改,后者会影响全局样式,
 
建议使用deep深度选择器进行穿透,覆盖框架本身的样式
 
而deep的写法在vue3里推荐使用 ::v-deep(class类名) {}
 
下面这2种写法已经被废弃了,虽然使用也能生效,但控制台会有警告
 
/deep/ class类名 {}
:deep(class类名) {}
 
 
还有一种好的方式是,把要覆盖的样式都提出来,单独写到一个.css文件中在引入 
 
 

 
10. ant-desgin-vue的树形组件全部展开后,导致整个页面出现滚动条?

外部容器并未添加滚动条,但当菜单栏展开后内容会益处,即使只是给树形组件外部容器设置overflow-y: auto也没用。

需要给树形组件外部添加一个div包裹,并对其设置相对定位,position: relative

 


 
11. vue3 使用ant-design vue的tree组件点击小三角图标才能展开,触点太小的问题 

 上图只能点三角符号才能展开子级,百度上找了很久,好不容易找到下面方法,经测试,已经失效

后来发现,可以用官方的目录组件来改造

 然后还需要覆盖下面样式

// 解决selected点击以后,不能整行显示自定义颜色的问题
::v-deep(.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected) {
background-color: transparent;
}
::v-deep(.ant-tree-treenode-selected) {
background-color: #133f65;
}

另外,如果遇到hover不能显示整行自定义颜色的问题,可以覆盖下面样式

// 解决hover后不能整行显示自定义颜色的问题
::v-deep(.ant-tree .ant-tree-node-content-wrapper:hover) {
background-color: #133f65;
}
::v-deep(.ant-tree.ant-tree-directory .ant-tree-treenode:hover::before) {
background-color: #133f65;
}

 


 
12. 如何给日期组件添加自定义图标
 
默认是这样的
 
添加suffixIcon属性后,直接img引入自定义图片即可
 

 
13. 如果在使用树形组件后,出现下图箭头所指的小竖线
 
 

这其实是滚动条,使用 overflow: hidden 隐藏就行 

 


 
14. 当table无数据或很少时,如何让分页组件仍然在底部,而不会跟着挤上来
 
如下图所示

html代码截图

核心css代码是使用flex

.report-main {

 display: flex;

  flex: 1;

}

.report-table {

 flex: 1;
}

最终效果

 


 
15. 日期组件如何禁止选择当天以后的日期
 

使用dayjs插件转换后实现

const onDisabledDate = current => {
return current && current > dayjs().endOf('day');
};

 


 
16. 如何实现toolTip在hover后的气泡效果,相当于html的title属性
 

 

 
17. 为何添加border-radius后,圆角不生效
 
可能会遇到圆角整个都不生效,或者只有一部分生效,如下图
 

 

解决方法:添加  overflow: hidden; 


 
18. 如果运行项目时报错,提示polyfill-object.fromentries 是否存在
 
如下图安装引入即可

 

有需要的朋友可以领取支付宝到店红包,能省一点是一点