db-formsearch

基于 element-ui 和 vue 封装的 PC 后台管理系统搜索组件

Search component of PC background management system based on element ui and vue encapsulation

效果图

使用方法 usage method

npm install db-formsearch vue 中 组件引入 In vue

Component import

import formsearch from 'db-formsearch'

样式文件引入\*\*不引入样式会丢失
Style file import * * Style will be lost if not imported
import "db-formsearch/db-formsearch.css";

<formSearch :opts="opts" @formSearch="formSearch"/>
        opts: [
        {
          label: "姓名",
          val: "",
          key: "name",
          type: "input",
          size: "small",
        },
        {
          label: "日期",
          val: "",
          key: "index",
          type: "date",
          format: "yyyy",
          dateType: "year",
          placeholder: "请选择日期",
          size: "small",
        },
        {
          label: "性别",
          key: "max",
          type: "select",
          selects: [
            { id: 1, name: "男" },
            { id: 2, name: "女" },
          ],
          size: "small",
        },
        {
          label: "多选",
          key: "maxs",
          type: "remoteSelect",
          selects: [
            { id: 1, name: "苹果" },
            { id: 2, name: "梨子" },
            { id: 3, name: "香蕉" },
            { id: 4, name: "桃子" },
          ],
          size: "small",
        },
        {
          label: "时间范围",
          key: "maxs2",
          type: "daterange",
          key: "startTime",
          key2: "endTime",
          format: "yyyy",
          starPlaceholder: "开始时间",
          endPlaceholder: "结束时间",
          size: "small",
        },
      ],

新增 slot 插槽用法 New slot usage

       {
          type: "slot",
        },
        {
          type: "slot",
          name: "item1",
        },

插槽页面使用方法 How to use the slot page

 <template>
        <div class="form-title">测试 text</div>
        <div class="form-value">
          <el-input></el-input>
        </div>
      </template>
      <template slot="item1">
        <div class="form-title">测试1 text</div>
        <div class="form-value">
          <el-input></el-input>
        </div>
      </template>
  :tips 可以公用form-title 和form-value 样式

Form title and form value styles can be shared

回调参数 Callback Arguments

 <dbFormsearch
      :opts="opts"
      :lableWidth="60"
      :itemWidth="31"
      :searchBtn="false"
      ref="addForm"
      @formSearch="formSearch"/>
formSearch(val){

}

提供 type 有

input 文本输入

date 年份选择

select 单选 selects为下拉选项

  selects: [
            { id: 1, name: "男" },
            { id: 2, name: "女" },
          ],

remoteSelect 多选 selects为下拉选项

 selects: [
            { id: 1, name: "苹果" },
            { id: 2, name: "梨子" },
            { id: 3, name: "香蕉" },
            { id: 4, name: "桃子" },
          ],

  inputs 为区间输入 需要俩个key ,key1
  Two keys, key1, are required for interval inputs

  daterange 为时间范围选择 同样需要俩个key ,key2
  The daterange also requires two keys, key2, to select a time range

属性选择

key 绑定的属性名称 Bound property name


type 需要渲染的类型 Types to render


label 名称 name

format 时间选择type Time selection type

placeholder 默认文案 Default Copy

dateType 时间格式化 默认type为date时生效 Time format takes effect when the default type is date

selects type为下拉选项时的渲染项 {id,name} Rendering item {id, name} when type is drop-down option

size 输入框&选择器尺寸 默认值small &medium &mini Input box&selector size default small&medium&mini

元素样式设置 Element Style Settings

labelWidth label宽度 类型为数字 The label width type is number

itemPadding 每个元素的间距 类型为字符串 例: 0 20px The spacing type of each element is string Example: 0 20px

itemWidth 每个元素的宽度 类型是百分比 传数字 The width type of each element is a percentage number

新增自定义提交按钮配合插槽使用 Add custom submit button to use with slot

新增自定义按钮功能 传入searchBtn 默认为true
配合插槽使用
The default value of the newly added user-defined button function transferred to searchBtn is true

Used with slots
 <dbFormsearch
      :opts="opts"
      :lableWidth="60"
      :itemWidth="31"
      :searchBtn="false"
      ref="addForm"
      @formSearch="formSearch" />
 <template slot="item1">
        <el-button type="primary" size="small" @click="search">查询</el-button>
        <el-button type="info" plain size="small" @click="reset">
          重置
        </el-button>
  </template>
    formSearch(val) {
      console.log(val);
    },
    search() {
      this.$refs.addForm.search();
    },
    reset() {},
  通过ref调用组件中的search和reset重置方法触发formSearch回调
  或者直接通过ref获取searchForm 即可拿到表单内容
Call the search and reset reset methods in the component through ref to trigger the formSearch callback

Or directly obtain the searchForm through ref to get the form content

后期在进行时间优化和布局优化以及排版 In the later stage, time optimization, layout optimization and typesetting are being carried out

注意 一行顶多展示 4 个选项后期在上线布局排版 Note that at most 4 options can be displayed in one line, which will be arranged in the online layout later