Element-UI 查询组件封装详解

2023-11-13 17:46:38

关键词：

正文：

Element-UI 概述

Element-UI 作为 Vue.js 的优秀 UI 框架，以其丰富的组件、易用性、样式灵活性等优势，受到广大开发者的喜爱和使用。Element-UI 提供了一系列基础组件，例如按钮、表单、表格、对话框等，以及更高级的组件，如时间选择器、上传组件、表格组件等，这些组件能够满足各种开发需求。

Element-UI 查询组件封装

Element-UI虽然提供了丰富的组件库，但并未包含查询组件。为了满足实际开发中常见的使用场景，我们可以基于Element-UI组件库进行查询组件的封装。

步骤一：安装依赖
首先，我们需要安装Element-UI及其依赖项。可以使用以下命令进行安装：

npm install element-ui

步骤二：创建查询组件
接下来，创建一个名为Query.vue的Vue组件，并添加如下代码：

<template>
  <div class="query-container">
    <el-form :model="queryForm" :inline="true" size="mini">
      <el-form-item label="姓名：">
        <el-input v-model="queryForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄：">
        <el-input-number v-model="queryForm.age" placeholder="请输入年龄"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'Query',
  setup() {
    const queryForm = reactive({
      name: '',
      age: ''
    });

    const submitForm = () => {
      // 这里可以调用后端接口，发送查询请求
      console.log('查询条件：', queryForm);
    };

    return {
      queryForm,
      submitForm
    };
  }
});
</script>

<style>
.query-container {
  padding: 20px;
}
</style>

步骤三：使用查询组件

在需要使用查询组件的页面，引入Query.vue组件，并将其作为子组件使用。

<template>
  <div>
    <query @submit-form="submitForm"></query>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import Query from './Query.vue';

export default defineComponent({
  name: 'Page',
  components: { Query },
  methods: {
    submitForm(queryForm) {
      // 这里可以调用后端接口，发送查询请求
      console.log('查询条件：', queryForm);
    }
  }
});
</script>