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 |