vue3+element-plus搜索+列表组件封装

一、应用场景

一般很多网站，有很多数据列表，基本都要做搜索的功能，如果涉及很多页面，很多列表，那么搜索组件，一般要求统一样式之类的，并且封装搜索组件主要目的是提高代码的可维护性、可复用性和可扩展性。
1、代码复用性： 封装搜索组件允许你在多个页面或组件中重复使用相同的搜索功能。这减少了代码的冗余，提高了开发效率。

2、可维护性： 通过将搜索功能封装到一个独立的组件中，可以更容易地维护和更新搜索逻辑。如果需要对搜索功能进行修改或添加新的功能，你只需要更新搜索组件而不必修改每个使用它的页面或组件。

3、可扩展性： 封装的搜索组件通常可以轻松扩展以支持不同类型的搜索字段或过滤条件。这使得在不同页面或应用中实现不同的搜索需求变得更加容易。

4、统一风格和用户体验： 通过使用相同的搜索组件，你可以确保整个应用的搜索界面保持一致的风格和用户体验，提高了应用的整体质量。

5、降低开发成本： 封装搜索组件可以节省开发时间和开发资源。开发人员可以专注于构建具体的业务逻辑而不必重复编写搜索功能。

6、易于测试： 独立的搜索组件可以更容易地进行单元测试，确保搜索功能的稳定性和正确性。

7、降低错误率： 通过减少手动编码搜索功能的机会，封装搜索组件有助于减少潜在的错误和bug。

二、组件必要功能

（一）搜索组件
1.输入框
2.选择框组件
3.时间选择器
4.日期时间组件
5.级联选择器组件
6.自定义插槽
7.搜索、重置
通过form表单进行上面的封装
（二）列表组件
1、复选框显示与否
2、操作列显示与否
3、排序
4、列表宽度默认宽度，传入展示传入宽度
5、分页组件修改每页多少条数据
6、修改页数和size回调

三、详细开发流程

1.新建文件

（1）在components里创建组件SearchForm文件夹，SearchForm夹里创建index.vue
（2）在components里创建组件TableAndPag文件夹，TableAndPag夹里创建index.vue
（3）页面内引入

2.代码实现

（1）搜索组件实现 MyCascader为城市组件根据自己的情况封装

<template>
    <el-card id="searchForm" class="card-from-content">
        <el-form v-bind="formConfig" :inline="true" :model="form" class="form">
            <template v-for="(item, i) in disConfig" :key="i">
                <!-- 输入框组件 -->
                <template v-if="item.type === 'input'">
                    <el-form-item v-bind="item" :prop="item.value">
                        <el-input v-model="form[item.value]" :placeholder="item.placeholder" />
                    </el-form-item>
                </template>
                <!-- 选择框组件 -->
                <template v-else-if="item.type === 'select'">
                    <el-form-item v-bind="item" :prop="item.value">
                        <el-select v-model="form[item.value]" v-bind="item.unitConfig">
                            <el-option v-for="opItem in item.options" :label="opItem.label" :value="opItem.value" />
                        </el-select>
                    </el-form-item>
                </template>
                <!-- 日期时间组件 -->
                <template v-else-if="item.type === 'datetimerange'">
                    <el-form-item v-bind="item" :prop="item.value">
                        <el-date-picker v-model="form[item.value]" v-bind="item.unitConfig" type="daterange"
                            range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                            :default-time="defaultTime" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDate" />
                    </el-form-item>
                </template>
                <!-- 级联选择器组件 -->
                <template v-else-if="item.type === 'cascader'">
                    <el-form-item v-bind="item"