设计一下
做表单控件需要的基础元素，基本上准备好了，然后就可以进行组装了。在组装之前先看一下整体设计：
基本上就是由这些内容组成，其中查询子控件由表单子控件组成，那么meta也就可以直接用表单子控件的，只是需要做一些调整，比如把开关的控件改成单选组的，单选组要加上“全选”的选项，或者清空的按钮。
当然还需要进行一些调整，现在脑力有限，无法一下子想太多，需要一步一步来实现。
查询控件的结构
由部分组成：快捷查询、全部查询、个性化查询等。
快捷查询
存放常用的查询字段，这样方便用户快速选择。全部查询
这个会放在“抽屉”里面，点击“更多”的时候才会显示，这样可以让客户去使用快捷之外的查询字段。当选择之后会自动进入快捷查询区域，这样可以方便用户连续使用。个性化查询
同一个模块，不同的用户会有不同的查询需求，比如用户甲需要查询字段一、字段二，客户乙需要查询字段三、字段四，那么用户可以把各自常用的查询字段设置为个性化查询里面，避免“众口难调”、每次都需要点“更多”的麻烦。列数
为了更好的利用屏幕宽度，所以这里设定好每个字段的宽度，然后自定排列，只要屏幕够宽，就可以拍更多列。宽展宽度
对于文本框这类的，这样的宽度是够用了，但是对于范围查询、单选组等的查询，这样的宽度显然不够，那么应该可以设置拓宽宽度的功能。
话说，css要怎么弄，不太好看的样子。
能想到的都包含进来了。当然这个只是针对管理后台类项目的查询需求，不包含网站的查询，对于网站的查询需求，可以再做一个查询控件。
还有好多细节功能需要实现，现在效率也太低了。
代码
<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">父组件没有设置插槽</slot>
</template>
<!--查询的子控件，采用动态组件的方式-->
<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">父组件没有设置插槽</slot>
</template>
<!--查询的子控件，采用动态组件的方式-->
<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 可以依据json动态生成表单，可以多行多列、排序、插槽、验证等
* @returns {*} Vue组件，表单控件
*/
export default {
name: 'el-find-class',
props: {
modelValue: Object, // 查询条件集合
meta: Object
},
setup (props, context) {
// 控件字典
const ctlList = findItemListKey
// 依据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实现的，因为UI库实现了很多功能，这里只是做了一个组装和完善的代码。
代码复杂了，也不知道要怎么说了。
源码
GitHub总是连接不上，所以搬到了gitee里面。
https://gitee.com/naturefw/nf-vue-element
