element UI 组件封装--搜索表单（含插槽和内嵌组件）

组件封装–搜索表单 searchForm.vue

可根据需要，参考姓名和工作自行增加更多常用的默认搜索项

<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>
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

内嵌组件 search_job.vue

具体原理可参考
https://blog.csdn.net/weixin_41192489/article/details/127966234

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用方法 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>
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