component + defineAsyncComponent
上次說到實現查詢控件的子控件瓣戚，使用了好幾個文件，但是看看代碼，幾乎差不多，區(qū)別就是控件類型不一樣施禾，其他都是一樣的黔漂。
那么能不能簡化一下订雾？
0004動態(tài)組件.png
文件多了就容易亂不易管理晴玖，要抽象。
Vue提供了動態(tài)組件的方式谨娜，比如這樣<component :is="currentTabComponent"></component>航攒，那么這個 currentTabComponent是啥呢？可以是異步組件趴梢。
export const formItemList = {
// 文本類 defineComponent
'el-form-text': defineAsyncComponent(() => import('./t-text.vue')),
'el-form-area': defineAsyncComponent(() => import('./t-area.vue')),
'el-form-url': defineAsyncComponent(() => import('./t-url.vue')),
'el-form-password': defineAsyncComponent(() => import('./t-password.vue')),
// 數字
'el-form-number': defineAsyncComponent(() => import('./n-number.vue')),
'el-form-range': defineAsyncComponent(() => import('./n-range.vue')),
// 日期漠畜、時間
'el-form-date': defineAsyncComponent(() => import('./d-date.vue')),
'el-form-time': defineAsyncComponent(() => import('./d-time.vue')),
// 選擇、開關
'el-form-checkbox': defineAsyncComponent(() => import('./s-checkbox.vue')),
'el-form-switch': defineAsyncComponent(() => import('./s-switch.vue')),
'el-form-checkboxs': defineAsyncComponent(() => import('./s-checkboxs.vue')),
'el-form-radios': defineAsyncComponent(() => import('./s-radios.vue')),
'el-form-select': defineAsyncComponent(() => import('./s-select.vue')),
'el-form-selwrite': defineAsyncComponent(() => import('./s-selwrite.vue')),
'el-form-select-cascader': defineAsyncComponent(() => import('./s-select-cascader.vue'))
}
/**
* 表單子控件轉換成查詢子控件坞靶，通過類型編號對應不同的組件實現
*/
export const formItemToFindItem = {
// 文本類 =》 el-form-text
100: formItemList['el-form-text'], // 單行文本
101: formItemList['el-form-text'], // 單行文本
102: formItemList['el-form-text'], // 單行文本
103: formItemList['el-form-text'], // 單行文本
104: formItemList['el-form-text'], // 單行文本
105: formItemList['el-form-text'], // 單行文本
106: formItemList['el-form-text'], // 單行文本
// 數字 =》 el-form-number
120: formItemList['el-form-number'], // 數組
121: formItemList['el-form-number'], // 數組
// 日期 =》 el-form-date
110: formItemList['el-form-date'], // 日期
111: formItemList['el-form-date'], // 日期 + 時間
112: formItemList['el-form-date'], // 年月
113: formItemList['el-form-date'], // 年周
114: formItemList['el-form-date'], // 年
// 時間 =》 el-form-time
115: formItemList['el-form-time'], // 任意時間
116: formItemList['el-form-time'], // 選擇固定時間
// 選擇憔狞、開關 =》el-form-checkboxs
150: formItemList['el-form-checkboxs'], // 多選組
151: formItemList['el-form-checkboxs'], // 多選組
152: formItemList['el-form-checkboxs'], // 多選組
153: formItemList['el-form-radios'], // 單選組
160: formItemList['el-form-select'], // 下拉
161: formItemList['el-form-select'], // 下拉
// 161: findItemForComponent['el-find-selwrite'], // 下拉多選
162: formItemList['el-form-select-cascader'] // 下拉聯(lián)動
}
表單控件里面需要各種各樣的控件類型，但是查詢并不需要那么多彰阴，比如文本類的查詢躯喇，都用文本框就好，不需要多行的硝枉，富文本的廉丽，url的這些。那么就需要做一個映射妻味，這里把表單的子控件類型正压，映射為查詢子控件需要的類型。
然后我們可以這樣加載：
<find-kind
v-model="findChoiceKind"
:findKind="findKind"
@change="myChange"
/>
<template v-if="findChoiceKind === 417 || findChoiceKind === 427">
<component
:is="ctlList[controlType]"
style="width:130px;"
v-model="findRange[0]"
v-bind="$attrs"
@myChange="myChange">
</component>
至
<component
:is="ctlList[controlType]"
style="width:130px;"
v-model="findRange[1]"
v-bind="$attrs"
@myChange="myChange">
</component>
</template>
<template v-else>
<component
:is="ctlList[controlType]"
style="width:130px;"
v-model="findText"
v-bind="$attrs"
@myChange="myChange">
</component>
</template>
這樣我們只需要傳遞進來控件類型责球，就可以實現各種控件的查詢了焦履，比如這些控件的查詢
0005查詢子控件.png
而文件只需要一個，另外為了讓日期選擇更適合用戶選擇雏逾，我們可以在做一個日期的子控件嘉裤，可以變成年月、年周等的查詢栖博。這樣可以更靈活屑宠。
0006年月的查詢.png
0007日期的查詢.png
還以為有年周的查詢呢，結果沒有仇让，年周還得自己弄典奉。
現在文件就簡單多了。
0004動態(tài)組件2.png
我對雷同代碼的容忍度是零丧叽，見到了就要想辦法消滅掉卫玖。
最后，最麻煩的還是日期踊淳，還得繼續(xù)研究假瞬。
