vue elementui 实现搜索栏公共组件封装的实例代码

下面我将为你讲解"vue elementui 实现搜索栏公共组件封装的实例代码"的完整攻略。

一、需求分析

在实现搜索栏公共组件封装之前，我们需要先确定组件的需求，包括：

1. 搜索栏包含的输入字段类型（文本输入、下拉框选择等）；
2. 搜索栏提交查询的方式（点击查询按钮、按下Enter键等）；
3. 查询参数的名称和格式；
4. 查询结果的展示方式。

例如我们可以将搜索栏中的输入字段类型分为文本输入框、下拉框等，提交查询的方式可以通过点击按钮提交或按下Enter键，查询参数的名称和格式可以通过接口文档来确定，查询结果的展示方式可以根据需求来定义。

二、组件封装

在分析完搜索栏的需求之后，我们可以开始进行组件的封装，以下是一个搜索栏公共组件的示例代码实现：

<template>
  <div class="search-bar">
    <el-form :inline="true" :model="query" @submit.native.prevent>
      <el-form-item v-for="(item, index) in items" :key="item.name">
        <el-input
          v-if="item.type === 'text'"
          v-model="query[item.name]"
          :placeholder="item.label"
        ></el-input>
        <el-select
          v-else-if="item.type === 'select'"
          v-model="query[item.name]"
          :placeholder="item.label"
        >
          <el-option
            v-for="(option, k) in item.data"
            :key="k"
            :value="option.value"
            :label="option.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  props: {
    items: {
      type: Array,
      required: true,
      default: () => []
    },
    onSubmit: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      query: {}
    };
  },
  methods: {
    submit() {
      this.onSubmit(this.query);
    }
  }
};
</script>

如上述代码所示，我们通过el-form元素包裹搜索栏的输入框和查询按钮，通过v-for指令遍历输入字段，并根据item.type的值判断输入类型，query则是用来保存查询的参数，通过submitButton函数来提交查询参数。通过props属性可以灵活的定制搜索栏的内容，实现了搜索栏的通用化。

三、组件使用

在完成组件的封装之后，我们需要对组件进行使用，以下是一个组件使用的示例代码：

<template>
  <div id="app">
    <search-bar :items="searchItems" :on-submit="handleSubmit" />
    <el-table :data="tableData" :columns="tableColumns" />
  </div>
</template>

<script>
import SearchBar from "./components/SearchBar";

export default {
  name: "App",
  data() {
    return {
      searchItems: [
        {
          type: "text",
          name: "name",
          label: "姓名"
        },
        {
          type: "select",
          name: "gender",
          label: "性别",
          data: [
            {
              label: "男",
              value: "1"
            },
            {
              label: "女",
              value: "2"
            }
          ]
        }
      ],
      tableData: [],
      tableColumns: [
        {
          prop: "name",
          label: "姓名"
        },
        {
          prop: "age",
          label: "年龄"
        },
        {
          prop: "gender",
          label: "性别"
        }
      ]
    };
  },
  methods: {
    handleSubmit(queryParams) {
      this.tableData = [
        {
          name: "张三",
          age: 18,
          gender: "男"
        },
        {
          name: "李四",
          age: 20,
          gender: "女"
        }
      ];
    }
  },
  components: {
    SearchBar
  }
};
</script>

可以看到我们在使用组件的同时，通过在searchItems中定义了输入字段的类型和名称，定义了tableData和tableColumns的表格数据，通过在handleSubmit方法中，通过数据查询，将查询结果展示在tableData中。

四、总结

以上便是实现搜索栏公共组件封装的实例代码完整攻略，通过以上的分析和示例代码，我们可以看到，搜索栏虽是一个简单的组件，但却可以通过灵活的封装和使用，大大地简化了前端开发中的重复工作，提高了开发效率。