Element UI表格和分页以及搜索条件的合成组件（2）

最新推荐文章于 2024-12-24 23:46:30 发布

原创最新推荐文章于 2024-12-24 23:46:30 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #动态组件 #搜索 #element ui #vue

随笔&笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用动态组件封装搜索表单的方法，通过循环渲染表单项<el-form-item>实现多搜索框的支持，并利用Vue的动态组件特性解决表单组件的复用问题。文章详细展示了如何配置不同类型的表单字段，如下拉选择、输入框和日期选择器，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态组件封装搜索表单

先来看搜索组件，这里的循环是循环表单内容<el-form-item></el-form-item>如果搜索框是多个的话

用循环渲染，加下来用动态组件解决，但是尺度要把控住，有些部分并不是完全适用

<template>
  <div class="search-form">
    <el-form @submit.native.prevent :inline="true" :model="model" v-bind="formProp">
      <div class="base-form-panel">
        <el-form-item v-for="(item, index) in searchList" :key="index" :label="item.label">
          <filed-item :field="item.fields" :models="models" :keyProp="item.prop" :modelThis="models[item.prop]" :onSearch="onSearch"></filed-item>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" :loading="loading" plain>
            {{'查询'}}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

其中filed-item组件是封装的动态组件component

看一下传入数据的格式：

 operationType: {
    label: '操作类型',//    表单label
    prop: 'operation',
    fields: {
      type: 'ElSelect',//    动态组件名
      data: [
        {label: '全部', value: ''},
        {label: '登录', value: '登录'},
        {label: '登出', value: '登出'},
        {label: '修改密码', value: '修改密码'}
      ]
    }
  },
  ipAddress: {
    label: 'IP地址',
    prop: 'ip',
    fields: {
      type: 'ElInput',
      props: {        //    这里存放用v-bind的数据
        placeholder: 'IP地址'
      }
    }
  },
  time: {
    label: '操作时间',
    prop: 'operation_time',
    fields: {
      type: 'ElDatePicker',
      props: {
        type: 'daterange',
        defaultTime: ['00:00:00', '23:59:59'],
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }
    }
  }

接下来是动态组件了，看代码

<template>
  <component v-if="field" :is="field.type" v-bind="field.props" v-model="thisModel" :key="keyProp" @keyup.enter.native="submit">
    <template v-if="Array.isArray(field.data) && field.data.length">
      <component v-for="(item, index) of field.data" :is="childFieldType" :key="index" v-bind="item" @keyup.enter.native="submit">
      </component>
    </template>
  </component>
</template>

这里面的循环是为了应对表单组件多层的情况，比如：时间轴（它有两层）