在写后台管理的时候会有很多列表,列表上面一般会有查询条件,对列表进行搜索查询,所以就想封装成为组件,就不需要每个页面写一堆的代码,直接循环出来进行遍历即可。
1.封装子组件searchForm组件
<template>
<el-form :model="searchInfo">
<el-row :gutter="10" style="margin: 10px 0;">
<el-col :span="item.span || 6" v-for="item, i in searchData" :key="i">
<el-form-item :label="item.label" :label-width="item.width || '80px'">
<el-input v-if="item.type === 'input'" v-model="searchInfo[item.prop]"
:placeholder="item.placeholder || '请输入'" />
<el-select v-if="item.type === 'select'" v-model="searchInfo[item.prop]"
:placeholder="item.placeholder || '请选择'">
<el-option v-for="item2, i2 in item.options" :key="i2" :label="item2.label" :value="item2.value" />
</el-select>
<el-date-picker v-if="item.type === 'date'" type="date" :value-format="item.format || 'YYYY-MM-DD'"
:placeholder="item.placeholder || '请选择日期'" v-model="searchInfo[item.prop]"
style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="btnInfo.span || 6">
<el-row justify="end">
<el-button :type="btnInfo.query || 'primary'" @click="onSubmit">查询</el-button>
<el-button :type="btnInfo.reset || 'default'" @click="onSubmit('reset')">重置</el-button>
</el-row>
</el-col>
</el-row>
</el-form>
</template>
<script setup>
const props = defineProps({
//搜索信息
searchInfo: {
type: Object,
default: {}
},
//表单数组
searchData: {
type: Array,
default: []
},
//按钮信息
btnInfo: {
type: Object,
default: {}
}
})
const emit = defineEmits(['submitEmits']);
const onSubmit = (data) => {
if (data == 'reset') {
emit('submitEmits', {});
} else {
emit('submitEmits', props.searchInfo);
}
}
</script>
<style lang="scss" scoped></style>
一般搜索条件都是输入框、选择器、日期选择,如有其他筛选条件,往里面添加即可!搜索时发射一个自定义事件,把数据传给父组件调用即可
2.父组件进行使用
<template>
<searchForm :searchData="searchData" :searchInfo="productionlineForm" @submitEmits="submitEmitsFn"></searchForm>
</template>
<script setup>
import searchForm from '@/components/searchForm/index.vue'
let productionlineForm = ref({
lineName: '',
lineCode: '',
status: ''
})
const searchData = ref([
{
label: '产线名称',
type: 'input',
prop: 'lineName'
},
{
label: '产线编号',
type: 'input',
prop: 'lineCode'
},
{
label: '状态',
type: 'select',
prop: 'status',
options: [
{
label: '正常',
value: 0
},
{
label: '停用',
value: 1
}
]
}
])
const submitEmitsFn = (val) => {
productionlineForm.value = val
//调接口渲染数据
//getLinePageFn()
}
</script>
<style lang="scss" scoped></style>