使用element-ui弄了个简单的表单搜索栏组件，适用于一般的管理后台。效果如下：
效果
点击搜索按钮
1.重置按钮默认存在，如果不需要可以通过showResetBtn隐藏
2.通过设置formOptions来设置需要的表单内容
3.设置btnItems来设置按钮，并且默认点击的时候都会返回整个表单内容
4.需要返回值在callBack中写入参数即可
btnItems: [
{
txt: '搜索', // 按钮名称
type: 'primary',
callBack: (val) => {
_self.test(val)
}, // 回调，可通过回调返回整个表单内容，回调方法写在methods中，通过重新定义this
},
{
txt: '导出',
type: 'primary',
callBack: () => {
_self.test2()
}, // 不需要返回值
}
], // 按钮数据
5.表单类型包括input/select/time/date，可以根据需求进行更改
组件页面
// search-column.vue
<template>
<div class="search-column-box">
<el-form :model="formData" ref="_form" :inline="true">
<el-form-item
v-for="(item, index) in formOptions"
:key="index"
:prop="item.prop"
:label="item.label ? item.label + '：' : ''"
:rules="item.rules"
>
<!-- input -->
<el-input
v-if="item.element === 'el-input'"
style="width: 199px"
v-model="formData[item.prop]"
:placeholder="item.placeholder || '请输入'"
></el-input>
<!-- select -->
<el-select
v-if="item.element === 'el-select'"
style="width: 199px"
v-model="formData[item.prop]"
clearable
>
<el-option
v-for="option in item.options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
<!-- time-select -->
<el-time-select
v-if="item.element === 'el-time-select' && !item.isRange"
style="width: 199px"
v-model="formData[item.prop]"
:picker-options="item.pickerOptions"
:is-range="item.isRange"
placeholder="选择时间">
</el-time-select>
<el-time-picker
v-if="item.element === 'el-time-select' && item.isRange"
is-range
v-model="formData[item.prop]"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<!-- el-date-picker -->
<el-date-picker
v-if="item.element === 'el-date-picker' && !item.isRange"
style="width: 199px"
v-model="formData[item.prop]"
:type="item.type"
clearable
:format="item.format"
:placeholder="item.placeholder || '请选择'"
></el-date-picker>
<el-date-picker
v-if="item.element === 'el-date-picker' && item.isRange"
v-model="formData[item.prop]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="item.pickerOptions">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button v-if="showResetBtn" @click="reset">重置</el-button>
<el-button
v-for="(item, index) in btnItems"
:key="index"
:type="item.type"
@click="item.callBack(formData)"
>
{{ item.txt }}
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'searchColumn',
data() {
return {
formData: {},
}
},
props: {
formOptions: {
type: Array,
default() {
return []
},
}, // 表单数组
btnItems: {
type: Array,
default() {
return []
},
}, // 按钮数组
showResetBtn: {
type: Boolean,
default: true
}, // 重置按钮，默认显示
},
mounted() {
// 给表单添加属性
this.formOptions.forEach((item) => {
this.$set(this.formData, item.prop, item.default || item.default === 0 ? item.default : '')
})
},
methods: {
// 重置
reset() {
this.$refs._form.resetFields()
this.formOptions.forEach((item) => {
this.$set(this.formData, item.prop, item.default || item.default === 0 ? item.default : '')
})
this.$emit('reset', this.formData)
},
},
}
</script>
<style lang="scss" scoped>
.search-column-box {
}
</style>
</script>
<style lang="scss" scoped>
.search-column-box {
}
</style>
使用页
<template>
<div>
<search :formOptions="formOptions" :btnItems="btnItems" @reset="reset"/>
</div>
</template>
<script>
import search from './components/search'
export default {
components: {
search,
},
data() {
const _self = this // 保存this，按钮回调用到
const getPickerOptions = () => {
let pickerOptions = {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
}
return pickerOptions
}; // 日期快捷方式
return {
formOptions: [
{
label: '意见内容', // 文字
prop: 'content', // 绑定值
element: 'el-input', // 显示类型
placeholder: '请输入意见内容',
},
{
label: '类型',
prop: 'type',
element: 'el-select',
default: 1, // 默认值
options: [
{ label: '给点意见', value: '1' },
{ label: '售后问题', value: '2' },
], // 选项
},
{
label: '提交时间',
prop: 'timeRange',
element: 'el-time-select',
pickerOptions: {
start: '07:30',
step: '00:15',
end: '18:30'
}, // 起止、间隔时间
isRange: true, // 范围
},
{
label: '提交日期',
prop: 'dateRange',
element: 'el-date-picker',
type: 'week',
format: 'yyyy 第 WW 周', // 显示样式
},
{
label: '选择日期范围',
prop: 'dateRange1',
element: 'el-date-picker',
isRange: true, // 范围
},
{
label: '选择日期范围',
prop: 'dateRange2',
element: 'el-date-picker',
isRange: true,
pickerOptions: getPickerOptions(), // 日期快捷方式
},
], // 表单数据
btnItems: [
{
txt: '搜索', // 按钮名称
type: 'primary',
callBack: (val) => {
_self.test(val)
}, // 回调，可通过回调返回整个表单内容，回调方法写在methods中
},
{
txt: '导出',
type: 'primary',
callBack: () => {
_self.test2()
},
}
], // 按钮数据
}
},
methods: {
test(val) {
console.log('搜索---', val)
},
test2() {
console.log('导出---')
},
},
}
</script>
网友评论