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; } }
...