Vue之JSX封装搜索头部
# 组件封装源码
export default {
data() {
const {searchProps} = this;
return {
searchData: searchProps.search || {},
}
},
props: {
searchProps: {
type: Object,
default: function () {
return {};
}
}
},
methods: {
typeInput(item) {
return (
<el-form-item prop={item.key}>
{item.label !== false && <div class="prepend small">{item.name}</div>}
<el-input
clearable={true}
style={{width: '160px', ...item.styles}}
v-model={this.searchData[item.key]}
placeholder={`请输入${item.name}`}
/>
</el-form-item>
)
},
typeSelect(item) {
return (
<el-form-item prop={item.key}>
{item.label !== false && <div class="prepend small">{item.name}</div>}
<zy-select v-model={this.searchData[item.key]} type={item.enumType} data={item.enums}
style={{...item.styles}}
placeholder="全部"/>
</el-form-item>
)
},
typeDatePicker(item) {
return (
<el-form-item prop={item.key}>
{item.label !== false && <div class="prepend small">{item.name}</div>}
<el-date-picker
style={{width: '220px', ...item.styles}}
v-model={this.searchData[item.key]}
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
picker-options={{...this.picker_options, ...item.pickerOptions}}
/>
</el-form-item>
)
},
handleDom(item) {
return {
select: this.typeSelect(item),
datePicker: this.typeDatePicker(item),
default: this.typeInput(item),
}
},
typeSearchBtn() {
const {searchProps: {onReset, onSearch}} = this;
const searchDom = <el-button type="primary" icon="el-icon-search" onClick={this.handleSearch}>查询</el-button>
const resetDom = <el-button icon="el-icon-refresh" onClick={this.handleReset}>重置</el-button>
return (
<div>
{onSearch && searchDom}
{onReset && resetDom}
</div>
)
},
handleSearch() {
const {searchProps: {onSearch}} = this;
onSearch && onSearch(this.searchData)
// this.$emit('search', this.searchData) // 可以自定义父级的事件，这里没用
},
handleReset() {
const {searchProps: {onReset}} = this;
// console.log(this.$refs['formData'].resetFields());
this.searchData = {}
onReset && onReset()
},
// handlerSearchData(newVal) {
// this.searchProps.formData = newVal
// }
},
computed: {
handlerSearchData() {
// 这里可以直接操作父级的数据，前提是别深克隆
this.searchProps.formData = this.searchData
}
},
// watch: {
// // 跟上面的computed效果一样
// searchData: {
// // 页面能实时获取到数据
// handler: 'handlerSearchData',
// deep: true,
// immediate: true
// },
// },
render() {
const {searchProps: {fields, formData}} = this;
formData && this.handlerSearchData
return (
<div class="searchBox">
<el-form
props={{model: this.searchData}}
label-width="85px"
ref="formData"
inline
class="demo-form-inline"
>
{/*form表单*/}
{
fields.map((item) => {
return (
this.handleDom(item)[item.type || 'default']
)
})
}
{/* 操作按钮 */}
<div class="searchBtn" style="float: right">
{this.typeSearchBtn()}
{/*额外的操作按钮*/}
{this.$slots.default}
</div>
</el-form>
</div>
);
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
# WithSearch文档
| 参数名 | 作用 | 类型 | 默认值 |
|---|---|---|---|
| search | 搜索初始值 | object | {} |
| fields | 必填，搜索表单项 | array | [] |
| onSearch | 查询操作,只有设置了此项，查询按钮才会显示 | fun | 无 |
| onReset | 查询重置操作, 只有设置了此项，重置按钮才会显示 | fun | 无 |
| formData | 获取form表单的值，只有设置了此项，才能获取最新值，默认不获取 | object | 无 |
fields
const searchFields = [
{
key: 'name',
name: '应用名称/ID',
label: false, // 隐藏label
styles: {width: '100px'} // 宽度
},
{
key: 'mediaId', // 数据提交的字段
name: '应用分类', // label的名字
type: 'select', // form的类型 默认是 input
enums: [{label: '是', value: 1}, {label: '否', value: 0}], // 选框的数据
enumType: {id: 'value', name: 'label'} // 选框的数据格式化
},
{
key: 'system',
name: '系统',
type: 'datePicker',
pickerOptions: { // picker的一些参数
disabledDate(time) {
return time.getTime() <= Date.now();
},
}
}
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 组件使用
<template>
<with-search :searchProps="searchProps"/>
</template>
export default {
data() {
return {
searchProps: {
search: {name: 112},
fields: searchFields,
onSearch: this.handleSearch,
onReset: this.handleReset,
formData: {}
},
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 写在最后
仅仅是提供一个思路，有待完善 有待完善 ...