使用element-ui弄了個(gè)簡(jiǎn)單的表單搜索欄組件，適用于一般的管理后臺(tái)。效果如下：
效果
點(diǎn)擊搜索按鈕
1.重置按鈕默認(rèn)存在缎患，如果不需要可以通過(guò)showResetBtn隱藏
2.通過(guò)設(shè)置formOptions來(lái)設(shè)置需要的表單內(nèi)容
3.設(shè)置btnItems來(lái)設(shè)置按鈕抑胎，并且默認(rèn)點(diǎn)擊的時(shí)候都會(huì)返回整個(gè)表單內(nèi)容
4.需要返回值在callBack中寫(xiě)入?yún)?shù)即可
btnItems: [
{
txt: '搜索', // 按鈕名稱(chēng)
type: 'primary',
callBack: (val) => {
_self.test(val)
}, // 回調(diào)古胆，可通過(guò)回調(diào)返回整個(gè)表單內(nèi)容何鸡，回調(diào)方法寫(xiě)在methods中纺弊，通過(guò)重新定義this
},
{
txt: '導(dǎo)出',
type: 'primary',
callBack: () => {
_self.test2()
}, // 不需要返回值
}
], // 按鈕數(shù)據(jù)
5.表單類(lèi)型包括input/select/time/date，可以根據(jù)需求進(jìn)行更改
組件頁(yè)面
// 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"
:label-width="labelWidth"
>
<!-- input -->
<el-input
v-if="item.element === 'el-input'"
style="width: 199px"
:size="item.size ? item.size : 'small'"
:type="item.type"
:disabled="item.disabled"
v-model="formData[item.prop]"
:placeholder="item.placeholder || '請(qǐng)輸入'"
></el-input>
<!-- select -->
<el-select
v-if="item.element === 'el-select'"
style="width: 199px"
:size="item.size ? item.size : 'small'"
v-model="formData[item.prop]"
:disabled="item.disabled"
:clearable="item.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"
:size="item.size ? item.size : 'small'"
style="width: 199px"
v-model="formData[item.prop]"
:value-format="item.valueFormat"
:picker-options="item.pickerOptions"
:is-range="item.isRange"
:disabled="item.disabled"
placeholder="選擇時(shí)間"
>
</el-time-select>
<el-time-picker
v-if="item.element === 'el-time-select' && item.isRange"
:size="item.size ? item.size : 'small'"
is-range
:disabled="item.disabled"
v-model="formData[item.prop]"
:value-format="item.valueFormat"
range-separator="至"
start-placeholder="開(kāi)始時(shí)間"
end-placeholder="結(jié)束時(shí)間"
placeholder="選擇時(shí)間范圍"
>
</el-time-picker>
<!-- el-date-picker -->
<el-date-picker
v-if="item.element === 'el-date-picker' && !item.isRange"
:size="item.size ? item.size : 'small'"
style="width: 199px"
v-model="formData[item.prop]"
:value-format="item.valueFormat"
:type="item.type"
:disabled="item.disabled"
clearable
:format="item.format"
:placeholder="item.placeholder || '請(qǐng)選擇'"
></el-date-picker>
<el-date-picker
v-if="item.element === 'el-date-picker' && item.isRange"
:size="item.size ? item.size : 'small'"
v-model="formData[item.prop]"
:value-format="item.valueFormat"
type="daterange"
:disabled="item.disabled"
range-separator="至"
start-placeholder="開(kāi)始日期"
end-placeholder="結(jié)束日期"
:picker-options="item.pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button
@click="search"
type="primary"
icon="el-icon-search"
size="mini"
>搜索</el-button
>
<el-button
v-if="showResetBtn"
@click="reset"
size="mini"
icon="el-icon-refresh"
>重置</el-button
>
<el-button
size="mini"
v-for="(item, index) in btnItems"
plain
:icon="item.icon"
:key="index"
:type="item.type"
:v-hasPermi="item.hasPermi"
@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 [];
},
}, // 表單數(shù)組
btnItems: {
type: Array,
default() {
return [];
},
}, // 按鈕數(shù)組
showResetBtn: {
type: Boolean,
default: false,
}, // 重置按鈕骡男，默認(rèn)顯示
labelWidth: {
type: String,
default: "",
}, // label的寬
rules: {
type: Array,
default() {
return [];
},
}, // rules設(shè)置
},
mounted() {
// 給表單添加屬性
this.formOptions.forEach((item) => {
this.$set(
this.formData,
item.prop,
item.default || item.default === 0 ? item.default : ""
);
});
},
methods: {
// 搜索
search() {
this.$emit("search", this.formData);
},
// 重置
reset() {
this.$refs._form.resetFields();
this.formOptions.forEach((item) => {
this.$set(
this.formData,
item.prop,
item.default || item.default === 0 ? item.default : ""
);
});
this.$emit("search", this.formData);
},
},
};
</script>
<style lang="scss" scoped>
.search-column-box {
}
</style>
使用頁(yè)
<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淆游，按鈕回調(diào)用到
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: '最近一個(gè)月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三個(gè)月',
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: '意見(jiàn)內(nèi)容', // 文字
prop: 'content', // 綁定值
element: 'el-input', // 顯示類(lèi)型
placeholder: '請(qǐng)輸入意見(jiàn)內(nèi)容',
},
{
label: '類(lèi)型',
prop: 'type',
element: 'el-select',
default: 1, // 默認(rèn)值
options: [
{ label: '給點(diǎn)意見(jiàn)', value: '1' },
{ label: '售后問(wèn)題', value: '2' },
], // 選項(xiàng)
},
{
label: '提交時(shí)間',
prop: 'timeRange',
element: 'el-time-select',
pickerOptions: {
start: '07:30',
step: '00:15',
end: '18:30'
}, // 起止、間隔時(shí)間
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(), // 日期快捷方式
},
], // 表單數(shù)據(jù)
btnItems: [
{
txt: '添加設(shè)備',
icon: "el-icon-plus",
type: 'primary',
callBack: (formData) => {
_self.test(formData)
}, // 回調(diào)隔盛，可通過(guò)回調(diào)返回整個(gè)表單內(nèi)容犹菱，回調(diào)方法寫(xiě)在methods中
}
}
], // 按鈕數(shù)據(jù)
}
},
methods: {
test(val) {
console.log('搜索---', val)
},
test2() {
console.log('導(dǎo)出---')
},
},
}
</script>
