设计一下

做表单控件需要的基础元素，基本上准备好了，然后就可以进行组装了。在组装之前先看一下整体设计：

基本上就是由这些内容组成，其中查询子控件由表单子控件组成，那么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