43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="formData.length" class="table-search" style="display: flex">
|
|
<div style="flex: 2">
|
|
<el-form ref="formRef" :model="searchParam" :inline="true">
|
|
<template v-for="item in formData" :key="item.prop">
|
|
<!-- :label="item.label + ':'" -->
|
|
<el-form-item
|
|
:prop="item.prop"
|
|
:label-width="item.labelWidth ? item.labelWidth : '120px'"
|
|
class="form-item"
|
|
:label="item.label"
|
|
>
|
|
<SearchFormItem :item="item" :search-param="searchParam" :search="search" />
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
</div>
|
|
<div style="display: flex">
|
|
<el-button type="primary" @click="search" style="margin-bottom: 0"> 搜索 </el-button>
|
|
<el-button @click="reset" style="margin-bottom: 0">重置</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts" name="SearchForm">
|
|
import SearchFormItem from "./components/SearchFormItem.vue";
|
|
interface ProTableProps {
|
|
formData?: any[]; // 搜索配置列
|
|
searchParam?: any; // 搜索参数
|
|
search: (params: any) => void; // 搜索方法
|
|
reset: (params: any) => void; // 重置方法
|
|
}
|
|
// 默认值
|
|
withDefaults(defineProps<ProTableProps>(), {
|
|
formData: () => [],
|
|
searchParam: {},
|
|
search: () => {},
|
|
reset: () => {}
|
|
});
|
|
</script>
|
|
<style lang="scss" scope>
|
|
@import "./index.scss";
|
|
</style>
|