Search

Encapsulate search components to dynamically generate forms through columns

TIP

The Search component is based on the Form component.

The main difference is that the Search component will add default layout parameters { xs: 24, md: 12, lg: 8, xl: 6 } for each value of the columns attribute;

In addition, the slot related to [prop] is changed from form-[prop] to search-[prop]

Use

Basic Use 

<template>
  <pro-search
    v-model="search"
    :columns="columns"
    label-width="100px"
    @submit="submit"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup() {
    const search = ref({})
    const columns = [
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'date',
          style: 'width: 100%',
        },
      },
    ]
    const submit = (done, isValid, invalidFields) => {
      ElMessage(`submit: ${isValid}`)
      console.log(search.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    }

    return {
      search,
      columns,
      submit,
    }
  },
})
</script>

Intellisense

Use the defineSearchColumns defineSearchMenuColumns defineSearchSubmit to make it easier to define columns

<template>
  <pro-search
    v-model="search"
    :columns="columns"
    :menu="menu"
    label-width="100px"
    @submit="submit"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  defineSearchColumns,
  defineSearchMenuColumns,
  defineSearchSubmit,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const search = ref({})
    const menu = defineSearchMenuColumns({
      submitText: 'Create',
      reset: false,
    })
    const columns = defineSearchColumns([
      {
        label: 'Name',
        prop: 'name',
        component: 'el-input',
      },
      {
        label: 'Address',
        prop: 'address',
        component: 'el-input',
      },
      {
        label: 'Date',
        prop: 'date',
        component: 'el-date-picker',
        props: {
          type: 'date',
          style: 'width: 100%',
        },
      },
    ])
    const submit = defineSearchSubmit((done, isValid, invalidFields) => {
      ElMessage(`submit: ${isValid}`)
      console.log(search.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    return {
      menu,
      search,
      columns,
      submit,
    }
  },
})
</script>

Slots

Directly add some slot with search-[prop] in the template

<template>
  <pro-search
    v-model="search"
    :columns="columns"
    label-width="100px"
    @submit="submit"
  >
    <template #menu-right>
      <el-button>menu-right</el-button>
    </template>
    <template #search-slot-label>
      <span>name</span>
    </template>
    <template #search-slot="{ value, setValue }">
      <el-input :value="value" @change="setValue">
        <template #prefix>
          <el-icon>
            <element-plus />
          </el-icon>
        </template>
      </el-input>
    </template>
  </pro-search>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { ElementPlus } from '@element-plus/icons-vue'
import { defineFormColumns, defineFormSubmit } from 'element-pro-components'

export default defineComponent({
  components: { ElementPlus },
  setup() {
    const search = ref({})
    const columns = defineFormColumns([
      {
        prop: 'slot',
      },
    ])
    const submit = defineFormSubmit((done, isValid, invalidFields) => {
      ElMessage(`submit: ${isValid}`)
      console.log(search.value, isValid, invalidFields)
      setTimeout(() => {
        done()
      }, 1000)
    })

    return {
      search,
      columns,
      submit,
    }
  },
})
</script>

TypeScript

The function defineSearchColumns supports passing in a Generics type to infer the value of prop, The function defineComponentProps supports passing in a Generics type to help input the props value

<template>
  <pro-search
    v-model="search"
    :columns="columns"
    label-width="100px"
    @submit="submit"
  />
</template>

<script setup lang="ts">
import { markRaw, ref } from 'vue'
import { ElDatePicker, ElMessage } from 'element-plus'
import {
  defineSearchColumns,
  defineSearchSubmit,
  defineComponentProps,
} from 'element-pro-components'

interface Search {
  name?: string
  date?: string[]
}

const search = ref<Search>({})
const columns = defineSearchColumns<Search>([
  {
    label: 'Name',
    prop: 'name',
    component: 'ElInput',
    props: defineComponentProps<'ElInput'>({
      clearable: true,
      placeholder: 'Please input your name',
      slots: {
        append: () => 'Search',
      },
    }),
  },
  {
    label: 'Date',
    prop: 'date',
    component: markRaw(ElDatePicker),
    props: defineComponentProps<typeof ElDatePicker>({
      type: 'daterange',
      style: 'width: 100%',
    }),
  },
])
const submit = defineSearchSubmit((done, isValid, invalidFields) => {
  ElMessage(`submit: ${isValid}`)
  console.log(search.value, isValid, invalidFields)
  setTimeout(() => {
    done()
  }, 1000)
})
</script>

Props

NameDescriptionTypeOptionsDefault
v-modelbinding valueobject / array--
columnsto generate form components, reference columnsarray--
menuconfig the menu content, reference menuobject--
configdefault layout config for each columnobject-{ xs: 24, md: 12, lg: 8, xl: 6 }
rulesvalidation rules of formobject--
inlinewhether the form is inlineboolean-false
arraywhether the form is ArrayFormboolean-
maxlimit the maximum number of ArrayForm componentnumber--
label-positionposition of label. If set to ‘left’ or ‘right’, label-width prop is also requiredstringright / left / topright
label-widthwidth of label, e.g. ‘50px’. All its direct child form items will inherit this value. Width auto is supported.string--
label-suffixsuffix of the labelstring--
hide-required-asteriskwhether required fields should have a red asterisk (star) beside their labelsboolean-false
show-messagewhether to show the error messageboolean-true
inline-messagewhether to display the error message inline with the form itemboolean-false
status-iconwhether to display an icon indicating the validation resultboolean-false
validate-on-rule-changewhether to trigger validation when the rules prop is changedboolean-true
sizecontrol the size of components in this formstringlarge / default /small-
disabledwhether to disabled all components in this form. If set to true, it cannot be overridden by its inner components’ disabled propboolean-false
scroll-to-errorWhen validation fails, scroll to the first error form entryboolean-false
scroll-into-view-optionsWhen validation fails, it scrolls to the first error item based on the scrollIntoView option. scrollIntoView.object / boolean—-
guttergrid spacingnumber-0
justifyhorizontal alignment of flex layoutstringstart / end / center / space-around / space-between / spacing-evenlystart
alignvertical alignment of flex layoutstringtop / middle / bottomtop

columns

NameDescriptionTypeOptionsDefault
propa key of v-model (unique value)string--
labellabel textstring--
componentbinding componentstring--
propstransfer props to the current componentobject--
modelsConfigure the v-model binding parameters of the component corresponding to the current item (Array<{ prop, key, event }>)array--
childrengroup form or sub-form contentarray--
typetype of children internal formsstringarray / group / tabs / collapse / stepsarray
maxlimit the maximum number of type=arraynumber--
showwhether to show the current componentboolean-true
labelWidthwidth of label, e.g. ‘50px’. Width auto is supported.string--
labelPositionPosition of item label. If set to 'left' or 'right', label-width prop is also required. Default extend label-postion of form.stringleft / right / top-
requiredwhether the field is required or not, will be determined by validation rules if omittedboolean-false
rulesvalidation rules of formobject--
errorfield error message, set its value and the field will validate error and show this message immediatelystring--
showMessagewhether to show the error messageboolean-true
inlineMessageinline style validate messageboolean-false
sizecontrol the size of components in this form-itemstringlarge / default /small-
spannumber of column the grid spansnumber-24
offsetnumber of spacing on the left side of the gridnumber-0
pushnumber of columns that grid moves to the rightnumber-0
pullnumber of columns that grid moves to the leftnumber-0
xs<768px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})--
sm≥768px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})--
md≥992px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})--
lg≥1200px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})--
xl≥1920px Responsive columns or column props objectnumber / object (e.g. {span: 4, offset: 4})--
disabledwhether Tab is disabled, work on type=tabs or type=collapseboolean—false
closablewhether Tab is closable, work on type=tabsboolean—false
lazywhether Tab is lazily rendered, work on type=tabsboolean—false
descriptionstep description, work on type=stepsstring——
iconstep custom icon, work on type=stepsstring / Component——
statuscurrent status, work on type=stepsstringwait / process / finish / error / success—

about props

The props attribute will all be passed to the component. For events need to be bound by on[Event]. example: change -> onChange, input -> onInput

props: {
  clearable: true,
  'prefix-icon': 'el-icon-search',
  suffixIcon: 'el-icon-date',
  onChange: e => console.log(e),
}
NameDescriptionTypeDefault
submitwhether to display a submit buttonbooleantrue
submitTextthe text of submit buttonstringSearch
submitPropsthe props of submit button, reference el-buttonobject{ type: ‘primary’ }
resetWhether to display a reset buttonbooleantrue
resetTextthe text of reset buttonstringReset
resetPropsthe props of reset button, reference el-buttonobject-
prevTextthe text of prev buttonstringPrev
prevPropsthe props of prev button, reference el-buttonobject-
nextTextthe text of next buttonstringNext
nextPropsthe props of next button, reference el-buttonobject-

Events

NameDescriptionType
submittriggers when the submit click(done: () => void, isValid: boolean, invalidFields) => void
resettriggers when the reset click() => void
validatetriggers after a form item is validated(prop: FormItemProp, isValid: boolean, message: string) => void
add-itemtriggers when the add click(indexes: number[]) => void
remove-itemtriggers when the remove click(indexes: number[]) => void
collapse-changetriggers when the collapse change(active: CollapseModelValue) => void
tab-changetriggers when the tab change(name: TabPaneName) => void
step-changetriggers when the step change(active: string | number) => void

Methods

NameDescriptionType
validatevalidate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted(callback?: FormValidateCallback) => void
validateFieldvalidate one or several form items(props?: string | string[], callback?: FormValidateCallback) => FormValidationResult
resetFieldsreset all the fields and remove validation result(props?: string | string[]) => void
scrollToFieldScroll to the specified form field(prop: string) => void
clearValidateclear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields’ validation messages will be cleared(props?: string | string[]) => void

Slots

NameDescriptionType
-anything inserted before the menu-
menu-leftcontrol the menu left display content{ loading: boolean }
menu-rightcontrol the menu right display content{ loading: boolean }
search-[prop]control the Item display content{ item: object, indexes?: number[], value: any, setValue: (value: any) => void }
search-[prop]-labelcontrol the Item label display content{ item: object, indexes?: number[] }
search-[prop]-errorcontrol the Item error display content{ error, item: object, indexes?: number[] }

Tip

[prop] the prop of columns