MSearchForm

MForm 是基于arco-design-vue的date-picker进行二次封装的组件，由于原生组件面板显示内容为Q1,Q2,Q3,Q4,针对该现象就行二次封装。

使用示例


<template>
     <MSearchForm
        ref="MSearchFormRef"
        :search-columns="searchColumns"
        :search-param="formData"
        :show-expand="false"
        :search="onSearch"
        :reset="onReset"
    />
</template>

<script lang="ts" setup>
import MSearchForm from '@/components/m-search-form/index.vue'

const MSearchFormRef = ref<InstanceType<typeof MSearchForm>>()

  const formData = reactive({
    name: '',
    gender: '',
    nation: '',
  })

  const searchColumns = computed(() => [
    { title: '姓名', dataIndex: 'name', search: { el: 'input', order: 0 } },
    {
      title: '性别',
      dataIndex: 'gender',
      search: {
        order: 1,
        render: (searchParam: { [key: string]: string }) => {
          return (
            <MDict
              v-model={searchParam.modelValue}
              code={DictEnum.GENDER}
              allowClear={true}
              placeholder={'请选择性别'}
            />
          )
        },
      },
    },
    {
      title: '民族',
      dataIndex: 'nationText',
      search: {
        key: 'nation',
        order: 2,
        render: (searchParam: { [key: string]: string }) => {
          return (
            <MDict
              v-model={searchParam.modelValue}
              code={DictEnum.NATION}
              allowClear={true}
              placeholder={'请选择民族'}
            />
          )
        },
      },
    },
  ])

  const onSearch = () => {
    const param = MSearchFormRef.value?.searchParam
    Message.info(`查询参数：${JSON.stringify(param)}`)
  }

  const onReset = () => {
    Message.info(`重置参数：${JSON.stringify(MSearchFormRef.value.searchParam)}`)
  }
</script>

Props

属性名	类型	描述	默认值
searchColumns	ColumnProps[]	搜索列，用来加载搜索列的内容	[]
searchParam	{ [key: string]: any }	搜索配置项,即搜索列的各个属性初始值	{}
search	--	搜索方法	--
reset	--	重置方法	--

Event

方法名	描述	参数
changeExpand	当条件过多时触发	value:boolean