index.vue
2.06 KB
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
<template>
<div class="box">
<el-select v-model="query.type" :disabled="isDisabledKey" clearable placeholder="聚合筛选条件" class="filter-item selectSearch" style="width: 130px" @change="changeType">
<el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
<div class="spanItem" />
<el-input v-model="query.value" :disabled="!query.type||isDisabledKey" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item selectInput" @change="toQuery" />
</div>
</template>
<script>
export default {
name: 'Index',
props: {
isDisabledKey: {
type: Boolean,
required: false,
default() {
return false
}
},
queryTypeOptions: {
type: Array,
required: true,
default() {
return []
}
},
searchKey: {
type: String,
required: false,
default() {
return 'type'
}
},
defaultKey: {
type: String,
required: false,
default() {
return ''
}
}
},
data() {
return {
query: {
type: '',
value: ''
}
}
},
mounted() {
if (this.defaultKey) {
this.query.type = this.defaultKey
}
},
methods: {
changeType() {
this.query.value = ''
this.toQuery()
},
toQuery() {
const obj = {
value: this.query.value
}
obj[this.searchKey] = this.query.type
this.$emit('toQuery', obj)
}
}
}
</script>
<style scoped>
.box {
display: inline-block;
border: 1px solid #DCDFE6;
border-radius: 5px;
height: 33px;
}
.spanItem {
display: inline-block;
width: 2px;
height: 20px;
margin-bottom: -1px;
background-color: #DCDFE6
}
/deep/ .selectSearch .el-input__inner {
border: none!important;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 135px;
}
/deep/ .selectInput .el-input__inner {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: none;
margin-left: -5px;
width: 208px;
}
</style>