记录一下封装列表搜索区域组件
一.在这里只做了输入框/选择框/日期选择，有需要其他类型可自行扩展
二.首先需要创建四个文件，扩展可在components里继续添加需要的类型
1.index文件为主要文件，用于引入所有组件
<template>
<div class="search-box">
<el-form
:model="formData"
ref="ruleForm"
class="search-form"
>
<el-row class="search-row">
<el-col
v-for="(formItem, index) in formOptions"
:key="index"
:span="colSpan ? colSpan : 8"
>
<el-form-item
:prop="formItem.prop"
:label="formItem.label ? formItem.label + ':' : ''"
:label-width="labelWidth"
>
<component
v-model="formData[formItem.prop]"
:is="formType(formItem.type)"
:form-item="formItem"
@search="search"
></component>
</el-form-item>
</el-col>
</el-row>
<div class="search-btns">
<el-button class="serch-btn" @click="search">搜索</el-button>
<el-button class="serch-btn" @click="reset">重置</el-button>
<el-button class="serch-btn" @click="export_btn" v-if="isShowExport">
导出
</el-button>
</div>
</el-form>
</div>
</template>
<script>
/**
* isShowExport 是否展示导出
* formOptions 搜索配置项 Array
*
** 子项
* type 0-输入框 1-选择框 2 时间选择
*
** 通用
* label 搜索项描述/如果没有配置placeholder充当默认placeholder
* prop 这里是搜索字段（搜索时使用的字段）
* isDisabled 禁用（默认false）
* initVal 默认值
*
** 选择框
* options 静态选择列表
* service 动态列表请求路径
* isInit 动态列表是否初始化(默认false)
* searchKey 动态搜索的key(默认name)
* optionsLabel options列表的label(默认name)
* optionsVal options列表的value(默认id)
* params 动态列表需要的参数(默认不传)
*
** 时间选择
* dateType 时间选择类型(默认date)
* format 时间选择显示格式(默认yyyy-MM-dd)
* valueFormat 时间选择value格式(默认yyyy-MM-dd)
*/
import vInput from "./components/vInput.vue";
import vSelect from "./components/vSelect.vue";
import vDatePicker from "./components/vDatePicker.vue";
export default {
props: {
isShowExport: {
type: Boolean,
default: false,
},
formOptions: {
type: Array,
default: () => [],
},
labelWidth: {
type: String,
default: "100px",
},
colSpan:{
type:Number,
default:8
}
},
data() {
return {
formData: {},
};
},
created() {
this.initValue();
},
methods: {
formType(type) {
let componentName = null;
switch (type) {
case 0:
componentName = vInput;
break;
case 1:
componentName = vSelect;
break;
case 2:
componentName = vDatePicker;
break;
}
return componentName;
},
// 初始化
initValue() {
let obj = {};
this.formOptions.forEach((v) => {
obj[v.prop] = v.initVal ? v.initVal : "";
});
this.formData = obj;
},
// 搜索
search() {
let obj = this.dispose();
this.$emit("searchBtn", obj);
},
// 重置
reset() {
this.initValue();
this.search();
},
// 导出
export_btn() {
let obj = this.dispose();
this.$emit("exportBtn", obj);
},
// 处理数据
dispose() {
let obj = {};
for (let key in this.formData) {
obj[key] = this.formData[key];
}
return obj;
},
},
};
</script>
<style lang="less">
.search-box {
.search-form {
width: 100%;
.el-form-item {
flex: 1;
display: flex;
.el-form-item__content {
margin-left: 10px !important;
}
}
}
.search-btns {
border-top: solid 1px #eee;
padding-top: 20px;
display: flex;
justify-content: flex-end;
}
}
</style>
2.vInput输入框文件，一般用于搜索名称/id
<template>
<el-input
v-model.trim="inputVal"
size="large"
:placeholder="placeholder"
type="text"
clearable
:disabled="isDisabled"
@input="input"
@keyup.enter.native="enter()"
>
</el-input>
</template>
<script>
export default {
props: {
value: {},
formItem: {
type: Object,
default: () => {},
},
},
computed: {
placeholder() {
return this.formItem.placeholder
? this.formItem.placeholder
: "请输入" + this.formItem.label;
},
isDisabled() {
return this.formItem.isDisabled;
},
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
},
},
},
data() {
return {};
},
methods: {
enter() {
this.$emit("search");
},
},
};
</script>
<style></style>
3.vSelect选择框文件，这里支持默认options列表与接口数据返回的列表处理
<template>
<el-select
remote
reserve-keyword
v-model="inputVal"
:multiple="multiple"
:filterable="filterable"
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading"
:disabled="isDisabled"
@change="change"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
<script>
export default {
props: {
value: {},
formItem: {
type: Object,
default: () => {},
},
},
computed: {
placeholder() {
return this.formItem.placeholder
? this.formItem.placeholder
: "请选择" + this.formItem.label;
},
options() {
if (this.formItem.options) {
return this.formItem.options;
} else {
return [];
}
},
multiple() {
return Array.isArray(this.formItem.initVal);
},
filterable() {
return this.formItem.service;
},
isDisabled() {
return this.formItem.isDisabled;
},
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
},
},
},
created() {
if (this.formItem.isInit) {
this.remoteMethod("");
}
},
data() {
return {
loading: false,
};
},
methods: {
change() {
this.$emit("search");
},
remoteMethod(e) {
if (!this.formItem.service) return;
let params = this.formItem.params ? this.formItem.params : {};
let key = this.formItem.searchKey ? this.formItem.searchKey : "name";
if (e.trim() != "") params[key] = e.trim();
// console.log(params);
this.formItem.service
.getList(params)
.then((resp) => {
if (resp != null && resp[0]) {
this.setOptions(resp[0]);
} else {
this.formItem.options = [];
}
})
.catch((err) => {
console.log(err);
});
},
setOptions(data) {
let label = this.formItem.optionsLabel
? this.formItem.optionsLabel
: "name";
let val = this.formItem.optionsVal ? this.formItem.optionsVal : "id";
let list = [];
data.forEach((item) => {
let obj = {
label: item[label],
value: item[val],
};
list.push(obj);
});
this.formItem.options = list;
},
},
};
</script>
<style></style>
4.vDatePicker日期选择器
<template>
<el-date-picker
clearable
v-model="inputVal"
:type="dateType"
:placeholder="placeholder"
:format="format"
:value-format="valueFormat"
:disabled="isDisabled"
@change="change"
>
</el-date-picker>
</template>
<script>
export default {
props: {
value: {},
formItem: {
type: Object,
default: () => {},
},
},
computed: {
placeholder() {
return this.formItem.placeholder
? this.formItem.placeholder
: "请选择" + this.formItem.label;
},
dateType() {
return this.formItem.dateType || "date";
},
format() {
return this.formItem.format || "yyyy-MM-dd";
},
valueFormat() {
return this.formItem.valueFormat || "yyyy-MM-dd";
},
isDisabled() {
return this.formItem.isDisabled;
},
inputVal: {
get() {
return this.value;
},
set(val) {
this.$emit("input", val);
},
},
},
data() {
return {};
},
methods: {},
};
</script>
<style></style>
三.使用组件
1.创建一个js文件，类似下图描述出你所需要的搜索项
2.在页面中引入封装好的组件，与配置的搜索项
