lee_amazing的博客

vben使用ant组件打包后，刷新页面发生样式丢失以及白屏的问题解决方法。

为了实现ant-design-vue的table列时间排序功能，我们可以在columns中添加：{ title: "发布时间", dataIndex: "releaseTime", key: "releaseTime", sorter: (a, b) => { let aTimeString = a.releaseTime; let bTimeString = b.rele

我们看官方文档的Calendar组件是通过switch来将数据渲染到每日的格子上的，可是我却发现这个渲染会使得每个月的同一天都会出现这种情况，case：1则每个月的1日都会有数据渲染上去。那么我就想通过导入一个数组就可以实现每日的格子数据渲染，那么我们就得了解Calendar渲染到每个日期格子的原理。首先它是通过v-for遍历到每个日期格子的。<li v-for="item in getListData(value)" :key="item.content">如上，主要看getList

效果如下图所示。通过点击左侧的选项可以在右侧的表格展示对应选项包含的数据。页面代码如下：<template> <div style="display: flex;"> <a-card style="width: 20%;"> <a-table :data-source="data" :columns="columns1" :customRow="Rowclick" >

当我们导入组件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文件 ]

当我们使用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/

因为有时候数据的不足会导致ant design vue的table表格撑不起来，影响美观，所以我通过/deep/来修改他的高度固定值让其有个足够的固定高度，从而解决问题。/deep/ .ant-table-body{ min-height: 500px;}//或者/deep/ .ant-table-body{ height: 500px;}...

在运用ant design vue的table表格时，觉得行高间距有点大，通过检查发现是padding撑起来了，但是研究一段时间发现使用customRow属性的回调函数改变padding没有效果。然后就可以选择最简单粗暴的直接修改对应的样式，通过检查找到行高样式的css，直接来个/deep/修改，成功了改变了padding压缩了行高。//直接在style中添加样式//这样使用会使得当前页面所有的table表格行样式都会改变//如果想要调整表头的行高，可以把下面的td改成th//调整body行属性