![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ant design vue小问题
文章平均质量分 55
lee_amazing
一个前端小白,大佬们带带我
展开
-
vben2使用ant2的Tree组件vite打包后,刷新页面出现报错TypeError: Cannot set properties of undefined (setting ‘name‘)
vben使用ant组件打包后,刷新页面发生样式丢失以及白屏的问题解决方法。原创 2022-07-25 14:44:48 · 1492 阅读 · 9 评论 -
ant-design-vue 对table的一列进行时间排序
为了实现ant-design-vue的table列时间排序功能,我们可以在columns中添加:{ title: "发布时间", dataIndex: "releaseTime", key: "releaseTime", sorter: (a, b) => { let aTimeString = a.releaseTime; let bTimeString = b.rele原创 2020-12-25 13:53:33 · 1512 阅读 · 1 评论 -
用ant-design-vue的日历Calendar组件来遍历数组到每个不同的日期格子上
我们看官方文档的Calendar组件是通过switch来将数据渲染到每日的格子上的,可是我却发现这个渲染会使得每个月的同一天都会出现这种情况,case:1则每个月的1日都会有数据渲染上去。那么我就想通过导入一个数组就可以实现每日的格子数据渲染,那么我们就得了解Calendar渲染到每个日期格子的原理。首先它是通过v-for遍历到每个日期格子的。<li v-for="item in getListData(value)" :key="item.content">如上,主要看getList原创 2020-12-16 16:00:52 · 3178 阅读 · 4 评论 -
使用ant design vue做一个选择不同选项展示不同表格的小例子(带筛选功能)
效果如下图所示。通过点击左侧的选项可以在右侧的表格展示对应选项包含的数据。页面代码如下:<template> <div style="display: flex;"> <a-card style="width: 20%;"> <a-table :data-source="data" :columns="columns1" :customRow="Rowclick" >原创 2020-12-09 11:07:44 · 3097 阅读 · 0 评论 -
ant-design-vue通过babel按需导入
当我们导入组件ant-design-vue时,为了进行优化,可按需导入,逐个导入太麻烦,就可以通过修改babel.config.js文件来进行按需导入ant-design-vue的组件首先将babel.config.js文件添加plugins: [ ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' } ] //`style: true`会加载less文件 ]原创 2020-11-19 11:18:24 · 1460 阅读 · 0 评论 -
引用ant-design-vue/dist/antd.less主题样式报错解决方法
当我们使用ant-design-vue组件时,想要设置主题样式,想引用ant-design-vue/dist/antd.less,可是出现如下报错。./node_modules/ant-design-vue/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ref–10-oneOf-3-1!./node_modules/postcss-loader/src??ref–10-oneOf-3-2!./node_modules/less-loader/原创 2020-11-19 10:49:01 · 12588 阅读 · 2 评论 -
ant design vue的table表格高度设置
因为有时候数据的不足会导致ant design vue的table表格撑不起来,影响美观,所以我通过/deep/来修改他的高度固定值让其有个足够的固定高度,从而解决问题。/deep/ .ant-table-body{ min-height: 500px;}//或者/deep/ .ant-table-body{ height: 500px;}...原创 2020-10-29 10:54:01 · 21079 阅读 · 7 评论 -
ant design vue的table行高调整
在运用ant design vue的table表格时,觉得行高间距有点大,通过检查发现是padding撑起来了,但是研究一段时间发现使用customRow属性的回调函数改变padding没有效果。然后就可以选择最简单粗暴的直接修改对应的样式,通过检查找到行高样式的css,直接来个/deep/修改,成功了改变了padding压缩了行高。//直接在style中添加样式//这样使用会使得当前页面所有的table表格行样式都会改变//如果想要调整表头的行高,可以把下面的td改成th//调整body行属性原创 2020-10-27 15:57:23 · 16573 阅读 · 3 评论