el-search-form v0.0.1

el-search-form

这是一个基于element-ui的自适应表单容器，能够根据父级容器的宽度确定每行表单控件的数量。

其使用window.ResizeObserver来监听容器大小变化，如果有兼容需求，那么需要自行引入resize-observer-polyfill。

• 在线预览

安装

npm i el-search-form -S

该包使用的是es6语法，如果想转成es5，需要自行转换（比如vue-cli可以用transpileDependencies: ['el-search-form']）

el-search-form会直接使用element-ui的el-form、el-row、el-col、el-button，需要确保这四个组件均已全局注册，并且记得引入element-ui的图标字体。

使用

记得在引入element-ui的样式后，引入el-search-form的样式：

// 需要有scss预处理器
import 'el-search-form/src/style.scss'
// 纯css
// import 'el-search-form/src/style.css'

在el-search-form内直接书写el-form-item即可，不需要考虑label-width属性

<template>
  <el-search-form label-position="left" @search="onSearch" @reset="onReset">
    <el-form-item label="v1">
      <el-input v-model="searchForm.v1"></el-input>
    </el-form-item>
    <el-form-item label="v2">
      <el-input v-model="searchForm.v2"></el-input>
    </el-form-item>
    <el-form-item label="v3">
      <el-input v-model="searchForm.v3"></el-input>
    </el-form-item>
    <el-form-item label="v4">
      <el-select v-model="searchForm.v4">
        <el-option v-for="i in 4" :key="i" :label="i" :value="i"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="v5">
      <el-date-picker v-model="searchForm.v5" type="date" value-format="yyyy-MM-dd"></el-date-picker>
    </el-form-item>
    <el-form-item label="v6">
      <el-date-picker v-model="searchForm.v6" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
    </el-form-item>
  </el-search-form>
</template>

export default {
  data() {
    return {
      searchForm: {
        v1: null,
        v2: null,
        v3: null,
        v4: null,
        v5: null
      }
    }
  },

  methods: {
    onSearch() {
      alert('查询')
    },
    onReset() {
      alert('重置')
    }
  }
}

注意！为了实现自适应功能，el-search-form内的每个表单控件宽度必须相同，比如常见的开始时间、结束时间必须拆成两个控件（或者用范围选择器），不然控件超宽会导致样式出错

API说明

Attributes

Events