M-AdminM-Admin
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
  • 指南

    • 介绍
    • 快速上手
    • 目录结构
    • 路由、菜单
    • 权限管理
    • 系统配置
  • 进阶

    • 网络请求
    • 国际化配置
    • Hooks
    • Store
    • TSX 支持
  • 组件教程

    • MTable
    • MForm
    • MTinymce
    • 季度选择器
    • MSearchForm
  • 其他

    • 项目代码规范
    • 常见问题

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

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

Event

方法名描述参数
changeExpand当条件过多时触发value:boolean
最近更新:: 2025/6/20 03:53
Contributors: xuyp
Prev
季度选择器