Skip to content

Commit dae3418

Browse files
zhontaizhontai
committed
增加my-search.vue搜索组件
1 parent af59759 commit dae3418

File tree

2 files changed

+121
-10
lines changed
  • ui/zhontai.ui.admin.vue3/src

2 files changed

+121
-10
lines changed

‎ui/zhontai.ui.admin.vue3/src/components/my-search/index.vue

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<template>
2+
<div class="table-search-container" v-if="props.search.length > 0">
3+
<el-form ref="tableSearchRef" :model="state.form" size="default" label-width="100px" class="table-form">
4+
<el-row>
5+
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key" v-show="key <= 2 || state.isToggle">
6+
<template v-if="val.type !== ''">
7+
<el-form-item
8+
:label="val.label"
9+
:prop="val.prop"
10+
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
11+
>
12+
<el-input v-if="val.type === 'input'" v-model="state.form[val.prop]" :placeholder="val.placeholder" clearable style="width: 100%" />
13+
<el-date-picker
14+
v-else-if="val.type === 'date'"
15+
v-model="state.form[val.prop]"
16+
type="date"
17+
:placeholder="val.placeholder"
18+
style="width: 100%"
19+
/>
20+
<el-select v-else-if="val.type === 'select'" v-model="state.form[val.prop]" :placeholder="val.placeholder" style="width: 100%">
21+
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
22+
</el-select>
23+
</el-form-item>
24+
</template>
25+
</el-col>
26+
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
27+
<el-form-item class="table-form-btn" label-width="0px">
28+
<div class="my-flex my-fill my-flex-end">
29+
<template v-if="search.length > 1">
30+
<div class="table-form-btn-toggle mr10" @click="state.isToggle = !state.isToggle">
31+
<span>{{ state.isToggle ? '收起' : '展开' }}</span>
32+
<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
33+
</div>
34+
</template>
35+
<el-button size="default" type="primary" @click="onSearch(tableSearchRef)">查询</el-button>
36+
<el-button icon="ele-RefreshLeft" text bg class="ml10" @click="onReset(tableSearchRef)">重置</el-button>
37+
</div>
38+
</el-form-item>
39+
</el-col>
40+
</el-row>
41+
</el-form>
42+
</div>
43+
</template>
44+
45+
<script setup lang="ts" name="example/makeTableDemoSearch">
46+
import { reactive, ref, onMounted } from 'vue'
47+
import type { FormInstance } from 'element-plus'
48+
49+
// 定义父组件传过来的值
50+
const props = defineProps({
51+
// 搜索表单
52+
search: {
53+
type: Array<TableSearchType>,
54+
default: () => [],
55+
},
56+
})
57+
58+
// 定义子组件向父组件传值/事件
59+
const emit = defineEmits(['search'])
60+
61+
// 定义变量内容
62+
const tableSearchRef = ref<FormInstance>()
63+
const state = reactive({
64+
form: {} as EmptyObjectType,
65+
isToggle: false,
66+
})
67+
68+
// 查询
69+
const onSearch = (formEl: FormInstance | undefined) => {
70+
if (!formEl) return
71+
formEl.validate((valid: boolean) => {
72+
if (!valid) {
73+
return
74+
}
75+
76+
emit('search', state.form)
77+
})
78+
}
79+
// 重置
80+
const onReset = (formEl: FormInstance | undefined) => {
81+
if (!formEl) return
82+
formEl.resetFields()
83+
emit('search', state.form)
84+
}
85+
// 初始化 form 字段，取自父组件 search.prop
86+
const initFormField = () => {
87+
if (props.search.length <= 0) return false
88+
props.search.forEach((v) => (state.form[v.prop] = ''))
89+
}
90+
// 页面加载时
91+
onMounted(() => {
92+
initFormField()
93+
})
94+
</script>
95+
96+
<style scoped lang="scss">
97+
.table-search-container {
98+
display: flex;
99+
.table-form {
100+
flex: 1;
101+
.table-form-btn-toggle {
102+
white-space: nowrap;
103+
user-select: none;
104+
display: flex;
105+
align-items: center;
106+
color: var(--el-color-primary);
107+
cursor: pointer;
108+
}
109+
}
110+
}
111+
</style>

‎ui/zhontai.ui.admin.vue3/src/views/example/make/tableDemo/search.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@
2424
</template>
2525
</el-col>
2626
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
27-
<el-form-item class="table-form-btn" :label-width="search.length <= 1 ? '10px' : '100px'">
28-
<template #label v-if="search.length > 1">
29-
<div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
30-
<span>{{ state.isToggle ? '收起' : '展开' }}</span>
31-
<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
32-
</div>
33-
</template>
34-
<div>
35-
<el-button size="default" type="primary" @click="onSearch(tableSearchRef)">查询 </el-button>
36-
<el-button size="default" type="info" class="ml10" @click="onReset(tableSearchRef)"> 重置 </el-button>
27+
<el-form-item class="table-form-btn" label-width="0px">
28+
<div class="my-flex my-fill my-flex-end">
29+
<template v-if="search.length > 1">
30+
<div class="table-form-btn-toggle mr10" @click="state.isToggle = !state.isToggle">
31+
<span>{{ state.isToggle ? '收起' : '展开' }}</span>
32+
<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
33+
</div>
34+
</template>
35+
<el-button size="default" type="primary" @click="onSearch(tableSearchRef)">查询</el-button>
36+
<el-button icon="ele-RefreshLeft" text bg class="ml10" @click="onReset(tableSearchRef)">重置</el-button>
3737
</div>
3838
</el-form-item>
3939
</el-col>

0 commit comments

Comments
 (0)