antd vue踩坑记录
1.a-select :value 值为空时 placeholder失效：
将value设为undefined
参考：https://blog.csdn.net/qq_42127308/article/details/110951771
2.文件上传进度条如何显示进度？
非自定义方案：
解决方案一：https://www.antdv.com/components/upload-cn/#components-upload-demo-upload-by-clicking
upload组件监听change，
对于 event 貌似要加 if(event) 否则会报错 待验证
方案二：使用customRequest
raect 解决方案，可以借鉴 https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242
解决Ant Design使用Upload自定义上传customRequest，上传时一直loading加载的问题
ant design vue 使用upload自定义方法实现图片文件上传
自定义方案：
vue获取上传进度条常规方案 ：vue项目上传文件以及进度条
3.气泡卡片样式修改无效？
popover/ToolTip 创建的节点不在root节点内，因此antd提供了overlayClassName来在外层设置了一个class
<a-popover overlayClassName="showtips">
4.动态删除校验？
在官网上只有form的API，当不能满足开发需求时，
1.看官网API
2.看框架组件原型链上查找挂载了哪些方法和属性可以用到
3.查看源码
例如，我需要动态删除或添加表单验证，但官网只有添加验证和清除验证结果和重置验证，则通过查看源码得知还有removeField可以用到
5.表格固定行不能自适应高度？
发现只有最后一行固定列高度不能自适应，每次页面高度改变时，固定列的高度才会自适应
推测，a-table组件未及时更新导致的问题
可以监听 传入a-table的data ， 触发 this.$forceUpdate() 强制更新a-table组件
6.a-tree 组件 自定义插槽不生效？
以此为例：
<a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :selected-keys="selectedKeys" :tree-data="gData" :replaceFields="{children: 'baglChildList', title: 'bqglLabel', key: 'bqyyUuid'}" @expand="onExpand" @select="onSelect" > <template slot="bqglLabel" slot-scope="{bqglLabel}"> <span v-if="bqglLabel.indexOf(searchValue) != -1"> {{ bqglLabel.substr(0, bqglLabel.indexOf(searchValue)) }} <span style="color: #f50">{{ searchValue }}</span> {{ bqglLabel.substr(bqglLabel.indexOf(searchValue) + searchValue.length) }} </span> <span v-else>{{ bqglLabel }} </span> </template> </a-tree>
需要在每一级数据中加入 scopedSlots 即可生效
7.a-tree 组件 获取被点击的子节点
1.查看官网api得知 select事件有如下形参
2.通过原型链查找到节点数据在 dataRef 上
如下示例：
<a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :selected-keys="selectedKeys" :tree-data="gData" :replaceFields="{children: 'baglChildList', title: 'bqglLabel', key: 'bqyyUuid'}" @expand="onExpand" @select="onSelect" multiple > //通过 info获取 当前点击的子节点数据 onSelect(selectedKeys, info) { console.log(info.node.dataRef) }
8.a-table组件 设置空状态jsx写法
<a-table :locale="tablenodata" /> tablenodata:{emptyText:()=>( <div><div><a-icon type="folder-open" /></div><div>暂无数据</div></div> )}
9.a-table组件 在配置对象中通过jsx设置表格slot？
columns: [ { title: '名称', dataIndex: 'fieldName', ellipsis: true, width: 120, customRender: (text, row, index) => { if (row.primary) { return ( <div> <a-popover title="字段名称"> <template slot="content"> <span>{text}（主键）</span> </template> <span type="primary">{text} </span> <a-icon type="key" /> </a-popover> </div> ) }
}
]
10.批量修改组件名
main.js中, 在 new Vue之前执行
import * as antDesign from 'ant-design-vue/es/index.js' Object.keys(antDesign).forEach(key => { const item = antDesign[key] if (typeof item === 'object' && item.install && key !== 'default') { if ( typeof item.name === 'string' && item.name.startsWith('P') && item.name[1] === item.name[1].toUpperCase() && item.name[0] !== '_' ) { item.name = 'A' + item.name.slice(1) } Object.keys(item).forEach(itemKey => { if (itemKey[0] === itemKey[0].toUpperCase() && itemKey[0] !== '_') { if ( typeof item[itemKey] === 'object' && typeof item[itemKey].name === 'string' && item[itemKey].name[0] === 'P' && item[itemKey].name[1] === item[itemKey].name[1].toUpperCase() ) { item[itemKey].name = 'A' + item[itemKey].name.slice(1) } } }) item.install(Vue) } // debugger })
11.select组件添加气泡提示框，搜索功能失效？
select组件加上气泡提示框之后，会导致select组件搜索功能失效
错误示例
错误代码，直接加上气泡框提示组件
<a-select :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " v-if="item.type === 'select'" v-model="formdata[item.keyname]" :placeholder="item.placeholder" :disabled="item.disabled" :defaultValue="item.defaultValue" :dropdownClassName="item.dropdownClassName" :dropdownStyle="item.dropdownStyle" :dropdownMatchSelectWidth="item.dropdownMatchSelectWidth" :mode="item.mode" :filter-option="filterOptionSelect" :maxTagCount="item.maxTagCount || 4" :showSearch="true" @change="changedata($event, item)" :style="item.inputStyle" > <!-- :maxTagCount="5" :maxTagPlaceholder="(omittedValues) => {return omittedValues++}" --> <!-- $event, item, item.keyname, formlayout, formdata --> <a-select-option :value="selectItem[item.valueKey || 'vcode']" v-for="selectItem in item.dataColumns" :key="selectItem[item.valueKey || 'vcode']" >
//加上此行代码，就ok了
<span v-show="false">{{ selectItem[item.textKey || 'vname'] }}</span>
//气泡框提示组件 <a-popover v-if="item.isSelectPopover" placement="right"> <template slot="content"> {{ selectItem[item.textKey || 'vname'] }} </template> {{ selectItem[item.textKey || 'vname'] }} </a-popover> <template v-else> {{ selectItem[item.textKey || 'vname'] }} </template> </a-select-option> </a-select>
12.a-form-model-item rules不生效 没有验证提示？
写法注意：prop传的是formdata的属性值字符串，而不是全路径
举例：
prop 传值 ps.psTime ，而不是 formdata.ps.psTime
formdata: {
ps: {
psTime: '',
psNo: '',
psUnit: ''
}
},
<a-form-model-item label="批示时间" name="ps.psTime" class="form-row" prop="ps.psTime" :rules="{required: true, message: '请选择批示时间', trigger: ['blur']}" > <a-date-picker v-model="formdata.ps.psTime" show-time type="date" placeholder="请选择批示时间" :valueFormat="'YYYY-MM-DD'" style="width: 100%" /> </a-form-model-item>
13.a-table插槽写法 ellipsis未生效？
必须要用
item.dataFormat ? item.dataFormat(text, record, index) : text 的写法 ellipsis 溢出...才生效
14.a-tree-select 多选回显之后点击失效？
a-tree-select 加上 @change , change回调函数中 加上 this.$forceUpdate()
<a-tree-select @change="onChange" > onChange(value) { this.formdata.label = value this.$forceUpdate() },
15.a-spin被a-modal遮挡
.loading { .ant-spin-nested-loading > div > .ant-spin { z-index: 99999 !important; } }
...
