组件封装–搜索表单 searchForm.vue
可根据需要,参考姓名和工作自行增加更多常用的默认搜索项文章来源:https://www.toymoban.com/news/detail-455981.html
<template>
<div style="padding: 30px; width: 300px">
<el-form
ref="searchFormRef"
:model="searchData"
:label-width="searchOption.labelWidth || '80px'"
:size="searchOption.size || 'mini'"
>
<el-form-item
v-if="searchOption.name"
label="姓名"
prop="name"
:rules="{ required: true, message: '不能为空' }"
>
<el-input v-model="searchData.name"></el-input>
</el-form-item>
<SearchJob v-if="searchOption.job" :searchData="searchData" />
<slot> </slot>
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
<el-button type="primary" @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import SearchJob from "./search_job.vue";
export default {
components: {
SearchJob,
},
props: {
searchData: Object,
searchOption: Object,
},
methods: {
search() {
this.$refs.searchFormRef.validate((valid) => {
if (valid) {
alert("通过表单校验,开始搜索!");
}
});
},
reset() {
this.$emit("reset");
},
},
};
</script>
内嵌组件 search_job.vue
具体原理可参考
https://blog.csdn.net/weixin_41192489/article/details/127966234文章来源地址https://www.toymoban.com/news/detail-455981.html
<template>
<el-form-item
label="工作"
prop="job"
:rules="{ required: true, message: '不能为空' }"
>
<el-input v-model="searchData.job"></el-input>
</el-form-item>
</template>
<script>
export default {
props: {
searchData: Object,
},
};
</script>
使用方法 index.vue
- 可直接在 SearchForm 内部通过默认插槽添加更多搜索项
- 必要变量有 searchData 和 searchOption
- 必要方法有 reset
<template>
<div style="padding: 30px; width: 300px">
<SearchForm
:searchData="searchData"
:searchOption="searchOption"
@reset="reset"
>
<el-form-item
label="爱好"
prop="hobby"
:rules="{ required: true, message: '不能为空' }"
>
<el-input v-model="searchData.hobby"></el-input>
</el-form-item>
</SearchForm>
</div>
</template>
<script>
import SearchForm from "./searchForm.vue";
export default {
components: {
SearchForm,
},
data() {
return {
searchData: {},
// 搜索表单的配置--是否显示默认搜索项
searchOption: {
labelWidth: "100px",
size: "small",
name: true,
job: true,
},
};
},
methods: {
reset() {
this.searchData = {};
},
},
};
</script>
到了这里,关于element UI 组件封装--搜索表单(含插槽和内嵌组件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!