設(shè)計一下
做表單控件需要的基礎(chǔ)元素，基本上準(zhǔn)備好了，然后就可以進(jìn)行組裝了。在組裝之前先看一下整體設(shè)計：
基本上就是由這些內(nèi)容組成，其中查詢子控件由表單子控件組成，那么meta也就可以直接用表單子控件的，只是需要做一些調(diào)整，比如把開關(guān)的控件改成單選組的，單選組要加上“全選”的選項，或者清空的按鈕。
當(dāng)然還需要進(jìn)行一些調(diào)整，現(xiàn)在腦力有限，無法一下子想太多，需要一步一步來實現(xiàn)。
查詢控件的結(jié)構(gòu)
由部分組成：快捷查詢、全部查詢、個性化查詢等。
快捷查詢
存放常用的查詢字段，這樣方便用戶快速選擇。全部查詢
這個會放在“抽屜”里面，點擊“更多”的時候才會顯示，這樣可以讓客戶去使用快捷之外的查詢字段。當(dāng)選擇之后會自動進(jìn)入快捷查詢區(qū)域，這樣可以方便用戶連續(xù)使用。個性化查詢
同一個模塊，不同的用戶會有不同的查詢需求，比如用戶甲需要查詢字段一、字段二，客戶乙需要查詢字段三、字段四，那么用戶可以把各自常用的查詢字段設(shè)置為個性化查詢里面，避免“眾口難調(diào)”、每次都需要點“更多”的麻煩。列數(shù)
為了更好的利用屏幕寬度，所以這里設(shè)定好每個字段的寬度，然后自定排列，只要屏幕夠?qū)?，就可以拍更多列?/p>寬展寬度
對于文本框這類的，這樣的寬度是夠用了，但是對于范圍查詢、單選組等的查詢，這樣的寬度顯然不夠，那么應(yīng)該可以設(shè)置拓寬寬度的功能。
話說，css要怎么弄，不太好看的樣子。
能想到的都包含進(jìn)來了。當(dāng)然這個只是針對管理后臺類項目的查詢需求，不包含網(wǎng)站的查詢，對于網(wǎng)站的查詢需求，可以再做一個查詢控件。
還有好多細(xì)節(jié)功能需要實現(xiàn)，現(xiàn)在效率也太低了。
代碼
<template>
<!--快捷查詢-->
<el-card class="box-card">
<el-form
inline
label-position="right"
:model="findItemModel"
ref="formControl"
class="demo-form-expand"
label-width="1px"
size="mini"
>
<el-form-item style="width:100px">
<el-dropdown size="small">
<el-button type="primary">
快捷查詢<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>方案一</el-dropdown-item>
<el-dropdown-item>獅子頭</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-form-item>
<el-form-item
v-for="(ctrId, index) in meta.baseMeta.quickFind"
:key="'form_'+index"
style="width:180px"
>
<!--判斷要不要加載插槽-->
<template v-if="getCtrMeta(ctrId).controlType === 1">
<slot :name="ctrId">父組件沒有設(shè)置插槽</slot>
</template>
<!--查詢的子控件，采用動態(tài)組件的方式-->
<template v-else>
<component
:is="ctlList[getCtrMeta(ctrId).controlType]"
v-model="findItemModel[ctrId]"
v-bind="getCtrMeta(ctrId)"
@myChange="mySubmit">
</component>
</template>
</el-form-item>
<el-form-item style="width:60px">
<el-button type="primary" round>更多</el-button>
</el-form-item>
</el-form>
</el-card>
<!--更多查詢，放在抽屜里面-->
<el-card class="box-card">
<el-form
inline
label-position="right"
:model="formModel"
ref="formControl"
class="demo-form-expand"
label-suffix="："
label-width="100px"
size="mini"
>
<el-form-item
v-for="(ctrId, index) in meta.baseMeta.allFind"
:key="'form_'+index"
:label="getCtrMeta(ctrId).label"
style="width:300px"
>
<!--判斷要不要加載插槽-->
<template v-if="getCtrMeta(ctrId).controlType === 1">
<slot :name="ctrId">父組件沒有設(shè)置插槽</slot>
</template>
<!--查詢的子控件，采用動態(tài)組件的方式-->
<template v-else>
<component
:is="ctlList[getCtrMeta(ctrId).controlType]"
v-model="findItemModel[ctrId]"
v-bind="getCtrMeta(ctrId)"
@myChange="mySubmit">
</component>
</template>
</el-form-item>
<el-form-item style="width:60px">
<el-button type="primary" round>查詢</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
/**
* @function div格式的表單控件
* @description 可以依據(jù)json動態(tài)生成表單，可以多行多列、排序、插槽、驗證等
* @returns {*} Vue組件，表單控件
*/
export default {
name: 'el-find-class',
props: {
modelValue: Object, // 查詢條件集合
meta: Object
},
setup (props, context) {
// 控件字典
const ctlList = findItemListKey
// 依據(jù)ID獲取組件的meta，因為model不支持【】嵌套
const getCtrMeta = (id) => {
return props.meta.itemMeta[id] || {}
}
// 獲取 $ref
const formControl = ref(null)
onMounted(() => {
// console.log('表單dom', formControl)
})
const resetForm = () => {
// 清空表單
formControl.value.resetFields()
}
const {
findItemModel, // 查詢子控件的model
mySubmit // 查詢子控件的事件
} = findManage(props, context)
return {
ctlList, // 子控件字典
resetForm, // 重置表單
formControl, // 獲取表單的dom
getCtrMeta, // 返回子控件的meta
findItemModel, // 查詢子控件的model
mySubmit
}
}
}
基于 element-plus的el-form實現(xiàn)的，因為UI庫實現(xiàn)了很多功能，這里只是做了一個組裝和完善的代碼。
代碼復(fù)雜了，也不知道要怎么說了。
源碼
GitHub總是連接不上，所以搬到了gitee里面。
https://gitee.com/naturefw/nf-vue-element
