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