如何在管理端项目中优雅地封装表格搜索条件

最新推荐文章于 2024-05-08 08:59:55 发布
最新推荐文章于 2024-05-08 08:59:55 发布
阅读量2.8k 收藏 26
点赞数 82
文章标签： html5 javascript css3 vue.js typescript sass 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51702278/article/details/138523261
版权

#前端做管理端项目时  会有一个非常明显的问题 就是 表格页面过多 如果每个表格页面 都是自己写一套表格搜索条件  会造成很多的代码冗余 于是我就尝试封装一个适用于大部分表格的 搜索条件组件 用于提高代码复用性、可维护性和用户体验#

文章目录

    • 引言
    • 需求分析
    • 设计思路
    • 实现细节
    • 使用示例
    • 总结

引言

在前端开发中，表格搜索是常见的功能需求。特别是在管理端项目中，表格搜索能够帮助用户快速定位到所需的数据。Element Plus作为基于Vue 3的组件库，提供了丰富的组件和功能，非常适合用于构建这样的搜索功能。本文将介绍如何使用Element Plus封装前端表格搜索条件。

需求分析

在封装表格搜索条件之前，我们需要明确用户的需求。通常，用户期望能够通过输入关键字、选择筛选条件等方式来搜索表格数据。因此，我们需要设计一个易于使用的搜索界面，并封装相应的搜索逻辑。

设计思路

  1. 搜索界面设计：使用Element Plus的表单组件（如el-form）和输入组件（如el-input）来设计搜索界面。可以根据需求添加不同的筛选条件，如文本框、下拉框、复选框等。
  2. 搜索逻辑封装：将搜索逻辑封装在一个单独的方法或组件中。该方法或组件接收搜索参数，并返回符合搜索条件的表格数据。在封装过程中，我们需要注意处理各种边界情况和异常情况，确保搜索功能的稳定性和可用性。

实现细节

  1. 搜索界面实现：

    • 使用el-form组件创建表单容器，并设置其属性以适应不同的布局需求。
    • 在表单中添加所需的输入组件和筛选组件，如el-input、el-select等。
    • 为每个输入组件和筛选组件绑定相应的数据字段和事件处理器，以便在用户输入或选择时更新搜索参数。
    • 展开/收缩功能  搜索条件默认展示时最多不超过三行 超过就会出现展开/收缩功能
    • 根据屏幕的大小实现搜索内容的自适应
    • 实现搜索和重置按钮始终处于搜索条件页面的右下角位置

  2. 特殊情况扩展：

    • 可能有时会有一些特殊的定制化的搜索条件 所以要兼容到这种情况做出处理。

使用示例

为了更好地说明如何使用Element Plus封装表格搜索条件，我将提供一个简单的使用示例。在该示例中，我将创建一个包含文本框和下拉框等的搜索界面以及页面图片和代码内容展示

首先展示下各个情况下的页面图片

以上是页面在各种屏幕大小下自适应显示的内容

下面是封装的搜索条件组件代码部分

<template>
    <div class="com-search-module" @submit.prevent ref="tableSearchFormRef">
        <div class="com-search-module-box">
            <el-form ref="searchformref" class="filter-container" :model="searchForm" @keyup.enter="search">
                <el-row ref="elRowRef" :gutter="20" :style="{width: `${props.isUseWindowSize ? widthVal : userModuleWidth}px`}">
                    <template v-for="(item, index) in list" :key="index">
                        <el-col :sm="24" :md="12" :lg="showThreeOrFour" :xl="showThreeOrFour" v-show="calcIsShowCol(index)">
                            <div class="com-search-module-list" v-if="item.type == 'input'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <el-input v-model="item.value" :placeholder="'请输入' + item.placeholder" clearable />
                            </div>

                            <div class="com-search-module-list" v-if="item.type == 'select'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <HnSelect :filterable="item.filterable" @seletChange="(val) => seletChange(item, val)" v-model="item.value" :item='item' :clearable="item.clearable === false?false:true" ></HnSelect>
                            </div>


                            <div class="com-search-module-list" v-if="item.type == 'datePicker'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <el-date-picker class="date-picker" :placeholder="'请选择' + item.name" v-model="item.value"
                                    type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期" :shortcuts="state.shortcuts" />
                            </div>

                            <div class="com-search-module-list" v-if="item.type == 'datePickerTime'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <el-date-picker class="date-picker" :placeholder="'请选择' + item.name" v-model="item.value" value-format="YYYY-MM-DD HH:mm:ss"
                                    type="datetimerange" unlink-panels range-separator="至" start-placeholder="开始日期" :default-time="[new Date(new Date().setHours(0, 0, 0)),new Date(new Date().setHours(23, 59, 59))]"
                                    end-placeholder="结束日期"/>
                            </div>

                            <div class="com-search-module-list" v-if="item.type == 'onedatePicker'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                    <el-date-picker  v-model="item.value"  type="date" value-format="YYYY-MM-DD" :placeholder="'请选择' + item.name"/>
                            </div>

                            <div class="com-search-module-list" v-if="item.type == 'onedatePickerTime'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                    <el-date-picker  v-model="item.value"  type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择' + item.name"/>
                            </div>

                            <!-- 多选 -->
                            <div class="com-search-module-list" v-if="item.type == 'moreSelect'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <!-- <HnSelect @seletChange="seletChange" v-model="item.value" :item='item' :moreSelect="true"></HnSelect> -->
                                <HnMoreSelect :filterable="item.filterable" @moreSeletChange="moreSeletChange" v-model="item.value" :item='item'></HnMoreSelect>
                            </div>

                            <!-- 复合输入框 -->
                            <div class="com-search-module-list" v-if="item.type == 'inputTemplate'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <el-input v-model="item.value" placeholder="请输入">
                                    <template #append><el-button :icon="RefreshLeft" @click="item.value=''"/></template>
                                </el-input>
                                <!-- <HnInputTemplate  v-model="item.value"></HnInputTemplate> -->
                            </div>

                            <!-- 复合单选框 -->
                            <div class="com-search-module-list" v-if="item.type == 'secondSelect'">
                                <span class="list-text" :style="{width: props.labelWidth}">{{ item.name }}</span>
                                <HnSecondSelect  @seletChangeOne="seletChangeOne" @seletChangeTwo="seletChangeTwo" v-model="item.value" :item='item'></HnSecondSelect>
                            </div>

                            <!-- 添加自定义插槽 -->
                            <div v-if="item.type === 'mySlot'">
                                <slot :name="item.key"></slot>
                            </div>
                        </el-col>
                    </template>
                    <!-- <div class="com-search-module-list" v-if="placeholderEle()" v-for="(item,index) in placeholderEle()" :key="index">

                    </div> -->
                    <el-col :sm="24" :md="calcSearchBtnPos" :lg="calcSearchBtnPos" :xl="calcSearchBtnPos">
                        <div class="com-search-module-button">
                            <div class="search" @click="search">搜索</div>
                            <div class="reset" @click="reset(searchformref)">重置</div>
                            <slot name="com-search-module-button"></slot>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- <div class="com-search-module-button" style="display: flex;justify-content: flex-end;align-items: center;padding-right:200px; padding-bottom: 20px;">
            <div class="search" @click="search" style="background: #34b46f">搜索</div>
            <div class="reset" @click="reset(searchformref)">重置</div>
            <slot name="com-search-module-button"></slot>
        </div> -->
        <div v-if="showButton" class="unfold_fewer_box">
            <el-button class="unfold_fewer_box_button" @click="isFormExpand = !isFormExpand" type="info">
                <!-- <el-icon v-show="!isFormExpand"><ArrowDownBold /></el-icon>
                <el-icon v-show="isFormExpand"><ArrowUpBold /></el-icon> -->
                <el-icon v-show="!isFormExpand"><CaretBottom color="#999" /></el-icon>
                <el-icon v-show="isFormExpand"><CaretTop color="#999" /></el-icon>
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { RefreshLeft } from '@element-plus/icons-vue'
import { useWindowSize } from "@vueuse/core"
import { useSettingsStore } from "@/store/modules/settings"
import { useAppStore } from "@/store/modules/app";
import shortcuts from '@/utils/dateShortCuts';

const emit = defineEmits(["search","reset", "seletChange","moreSeletChange",'seletChangeOne',"seletChangeTwo"]);
const props = defineProps({
    list: { type: Array<Search> },//查询框架数据
    searchForm: {        //返回数据
        type: Array,
        default: () => {
            return []
        }
    },
    isUseWindowSize: {
        type: Boolean,
        default: true
    },
    labelWidth: {
        type: String,
        default: '120px'
    }
});

watch(() => props.list, (val:any) => {//监听list
    if (val && val.length > 0) {
        state.list = val;
        // 排序功能
        state.list.sort(compare('sort'))
    } else {
        state.list = []
    }
})

const elRowRef = ref()
const tableSearchFormRef = ref()
const { width } = useWindowSize()
const { width: elWidth } = useElementSize(tableSearchFormRef)
const appStore = useAppStore();
const settingsStore = useSettingsStore();
const showSidebar = computed(() => settingsStore.layout !== 'top')
const widthVal = computed(() => {
    const widthVal = width.value - 40 - 40
    return showSidebar.value ? (!appStore.sidebar.opened ? (width.value >= 992 ? (widthVal - 54) : widthVal) : (widthVal - 210)) : widthVal
})
const showThreeOrFour = computed(() => {
    if (width.value >= 1200 && width.value < 1600) return 8
    return 6
})
const userModuleWidth = computed(() => {
    return elWidth.value
})
const searchformref = ref<FormInstance>()

// 搜索表单 关于展开和收缩功能
const isFormExpand = ref(false);
const showButton = computed(() => {
    if(props.list){
        // if(spanValue.value === 6 && props.list.length >= 12){
        //     return true;
        // }else if(spanValue.value === 8 && props.list.length >= 9){
        //     return true;
        // }else if(spanValue.value === 12 && props.list.length >= 6){
        //     return true;
        // }else if(spanValue.value === 24 && props.list.length >= 3){
        //     return true;
        // }else{
        //     return false
        // }
        if (width.value < 992) {
            if (props.list.length >= 3) {
                return true
            }
        } else if (width.value >= 992 && width.value < 1200) {
            if (props.list.length >= 6) {
                return true
            }
        } else if (width.value >= 1200 && width.value < 1600) {
            if (props.list.length >= 9) {
                return true
            }
        } else if (width.value >= 1600) {
            if (props.list.length >= 12) {
                return true
            }
        } else {
            return false
        }
    }else{
        return false
    }
});





const state = reactive({
    list: [],
    shortcuts: shortcuts
})

const spanValue = ref(6);
// 站位元素是否显示
const placeholderEle = ()=>{
    if( !isFormExpand.value ){// 收起
        if( spanValue.value === 6 && props.list && is4PatternNumber1(props.list?.length) && props.list?.length<11){// 一行四个时 lsit 有2/6/10个 补位一个
            return 1
        }else if( spanValue.value === 6 && props.list && is4PatternNumber2(props.list?.length) && props.list?.length<10){// 一行四个时 lsit 有1/5/9个 补位两个
            return 2
        }else if( spanValue.value === 6 && props.list && is4PatternNumber3(props.list?.length) && props.list?.length<9){// 一行四个时 lsit 有4/8个 补位三个
            return 3
        }else if( spanValue.value === 8 && props.list && is3PatternNumber1(props.list?.length) && props.list?.length<8){// 一行三个时 lsit 有1/4/7个 补位一个
            return 1
        }else if( spanValue.value === 8 && props.list && is3PatternNumber2(props.list?.length) && props.list?.length<7){// 一行三个时 lsit 有3/6个 补位两个
            return 2
        }else if( spanValue.value === 12 && props.list && is2PatternNumber1(props.list?.length) && props.list?.length<5){// 一行两个时 lsit 有2/4个 补位一个
            return 1
        }else{
            return false
        }
    }else{// 展开
        if( spanValue.value === 6 && props.list && is4PatternNumber1(props.list?.length)){// 一行四个时 lsit 有2/6/10/14/18/22/26/30/34/38个 补位一个
            return 1
        }else if( spanValue.value === 6 && props.list && is4PatternNumber2(props.list?.length)){// 一行四个时 lsit 有1/5/9/13/17/21/25/29/33/37/41/45个 补位两个
            return 2
        }else if( spanValue.value === 6 && props.list && is4PatternNumber3(props.list?.length)){// 一行四个时 lsit 有4/8/12/16/20/24/28/32/36/40/44个 补位三个
            return 3
        }else if( spanValue.value === 8 && props.list && is3PatternNumber1(props.list?.length)){// 一行三个时 lsit 有1/4/7个 补位一个
            return 1
        }else if( spanValue.value === 8 && props.list && is3PatternNumber2(props.list?.length)){// 一行三个时 lsit 有3/6/9个 补位两个
            return 2
        }else if( spanValue.value === 12 && props.list && is2PatternNumber1(props.list?.length)){// 一行两个时 lsit 有2/4/6个 补位一个
            return 1
        }else{
            return false
        }
    }
}
const is4PatternNumber1 = (num:number)=>{// 一行四个时 lsit 有2/6/10/14/18/22/26/30/34/38个 这种规律时 补位一个
  let result = (num - 2) % 4 === 0;
  return result && Number.isInteger((num - 2) / 4);
}
const is4PatternNumber2 = (num:number)=>{// 一行四个时 lsit 有1/5/9/13/17/21/25/29/33/37/41/45个 这种规律时 补位两个
  let result = (num - 1) % 4 === 0;
  return result && Number.isInteger((num - 1) / 4);
}
const is4PatternNumber3 = (num:number)=>{// 一行四个时 lsit 有4/8/12/16/20/24/28/32/36/40/44个 这种规律时 补位三个
    return num % 4 === 0 && Number.isInteger(num / 4);
}
const is3PatternNumber1 = (num:number)=>{// 一行三个时 lsit 有1/4/7个 这种规律时 补位一个
  let result = (num - 1) % 3 === 0;
  return result && Number.isInteger((num - 1) / 3);
}
const is3PatternNumber2 = (num:number)=>{// 一行三个时 lsit 有3/6/9个 这种规律时 补位两个
    return num % 3 === 0 && Number.isInteger(num / 3);
}
const is2PatternNumber1 = (num:number)=>{// 一行两个时 lsit 有2/4/6个 这种规律时 补位一个
    return num % 2 === 0 && Number.isInteger(num / 2);
}
// 计算收起状态下 最多展示几个搜索条件
const calcIsShowCol = (index:number) => {
    if( isFormExpand.value ){// 展开
        return true
    } else {
        // if(spanValue.value === 6 && index<11){// 收缩 一行4个 最多显示11个
        //     return true
        // }else if(spanValue.value === 8 && index<8){// 收缩 一行3个 最多显示8个
        //     return true
        // }else if(spanValue.value === 12 && index<5){// 收缩 一行2个 最多显示5个
        //     return true
        // }else if(spanValue.value === 24 && index<2){// 收缩 一行1个 最多显示2个
        //     return true
        // }else{
        //     return false
        // }
        if (width.value < 992) {
            if (index < 2) {
                return true
            }
        } else if (width.value >= 992 && width.value < 1200) {
            if (index < 5) {
                return true
            }
        } else if (width.value >= 1200 && width.value < 1600) {
            if (index < 8) {
                return true
            }
        } else if (width.value >= 1600) {
            if (index < 11) {
                return true
            }
        } else {
            return false
        }
    }
}
// 计算一行显示几个搜索条件
const calcSpan = () => {
    if(tableSearchFormRef.value.offsetWidth<992){
        spanValue.value = 24
    }else if(tableSearchFormRef.value.offsetWidth>=992 && tableSearchFormRef.value.offsetWidth<1200){
        spanValue.value = 12
    }else if(tableSearchFormRef.value.offsetWidth>=1200 && tableSearchFormRef.value.offsetWidth<1600){
        spanValue.value = 8
    }else{
        spanValue.value = 6
    }
}

// 计算搜索按钮的位置
const calcSearchBtnPos = computed(() => {
    if (width.value >= 992 && width.value < 1200) {
        if (isFormExpand.value) {
            const count = props.list!.length % 2
            return 24 - 12 * count
        } else {
            const len = props.list!.length
            if (len > 5) {
                return 12
            } else {
                const count = len % 2
                return 24 - 12 * count
            }
        }
    } else if (width.value >= 1200 && width.value < 1600) {
        if (isFormExpand.value) {
            const count = props.list!.length % 3
            return 24 - 8 * count
        } else {
            const len = props.list!.length
            if (len > 8) {
                return 8
            } else {
                const count = len % 3
                return 24 - 8 * count
            }
        }
    } else if (width.value >= 1600) {
        if (isFormExpand.value) {
            const count = props.list!.length % 4
            return 24 - count * 6
        } else {
            const len = props.list!.length
            if (len > 11) {
                return 6
            } else {
                const count = props.list!.length % 4
                return 24 - count * 6
            }
        }
    } else {
        return 24
    }
})

onUnmounted(() => {
    window.removeEventListener('resize', calcSpan)
})


function search() {
    state.list.forEach((item: Search) => {
        if (item.type == 'datePicker' || item.type == 'datePickerTime') {
            if (item.value && item.value.length > 0) {
                if (typeof item.value[0] === 'string') {
                    item.value[0] = item.value[0].replace(/\//g, '-');
                } else {
                    item.value[0] = item.value[0].toLocaleDateString().replace(/\//g, '-');
                }

                if (typeof item.value[1] === 'string') {
                    item.value[1] = item.value[1].replace(/\//g, '-');
                } else {
                    item.value[1] = item.value[1].toLocaleDateString().replace(/\//g, '-');
                }
            }
        }
        props.searchForm[item.key] = item.value;
    })
    emit('search', props.searchForm)
}

function reset(searchformref: FormInstance | undefined) {
    emit('reset');
    nextTick(() => {
        // searchformref.validateOnRuleChange.resetField();
        searchformref?.resetFields()
    });
    state.list.forEach((item) => {
        switch (Object.prototype.toString.call(item.value)) {
            case '[object Array]':
                item.value = []
                break;
            case '[object String]':
                item.value = ""
                break;
            case '[object Number]':
                item.value = null
                break;
            default:
                item.value = null
                break;
        }
    })
}
function compare(attr) {
    return function (a, b) {
        let val1 = a[attr]
        let val2 = b[attr]
        return val1 - val2
    }
}
function seletChange(item, val) {
    emit('seletChange', item, val)
}
function moreSeletChange(item,val){
    emit('moreSeletChange',item,val)
}
function seletChangeOne(item,val){
    emit('seletChangeOne',item,val)
}
function seletChangeTwo(item,val){
    emit('seletChangeTwo',item,val)
}

onMounted(() => {
    window.addEventListener('resize', calcSpan);
    calcSpan();

    if (props.list && props.list.length > 0) {
        state.list = props.list
        // 排序功能
        state.list.sort(compare('sort'))
    } else {
        state.list = []
    }
})
defineExpose({
    state,
    search,
    reset,
    compare,
    seletChange,
    moreSeletChange
});
</script>
<style lang="less" scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
// 展开 收起区域
.unfold_fewer_box{
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-30%);
    width: 200px;
    .unfold_fewer_box_button{
        width: 96px;
        height: 20px;
        border-radius: 0px 0px 8px 8px;
        box-shadow: 0px 1px 10px 1px #E6E6E6;
        background-color: #FFF;
        border: none
    }
}
.com-search-module-box{
    transition: max-height 0.6s  ease-in-out;
    -webkit-transition: max-height 0.6s ease-in-out; /* Safari 和 Chrome */
    -moz-transition: max-height 0.6s ease-in-out; /* Firefox */
    -ms-transition: max-height 0.6s ease-in-out; /* IE 9 */
    overflow: hidden; /* 出现滚动条 */
    padding: 0 0 20px;
}

</style>

下面是在页面中使用的示例

<template>
    <div class="app-container" v-loading="loading">
        <HnQueryTemplate @search="handleQuery" :searchForm='searchForm' :list='list' label-width="110px"></HnQueryTemplate>
 
</template>
<script setup lang="ts">
    const searchForm = reactive<ForecastQuery>({
        pageNum: 1,
        pageSize: 10,
    });
    const list = reactive<Array<Search>>([
        {
            key: 'customerIdList',
            name: '客户', //名字
            type: 'moreSelect', //类型
            placeholder: '客户',
            filterable:true,//筛选功能
            value: [], //绑定的值
            options: [],
            sort: 1,
        },
        {
            key: 'serviceTypeIdList',
            name: '服务', //名字
            type: 'moreSelect', //类型
            filterable:true,//筛选功能
            placeholder: '服务',
            value: '', //绑定的值
            options: [],
            sort: 2,
        },
        {
            key: 'siteIdList',
            name: '拣货站点', //名字
            type: 'moreSelect', //类型
            filterable:true,//筛选功能
            placeholder: '拣货站点',
            value: '', //绑定的值
            isShow:true,
            options: [],
            sort: 3,
        },
        {
            key: 'forecastTime',
            name: '预报节点', //名字
            type: 'onedatePickerTime', //类型
            placeholder: '预报节点',
            value: '', //绑定的值
            sort: 4,
        },
        {
            key: 'createByIdList',
            name: '创建人', //名字
            type: 'moreSelect', //类型
            placeholder: '创建人',
            value: '', //绑定的值
            options: [],
            filterable: true,
            sort: 5,
        },
        {
            key: 'createByTime',
            name: '创建时间', //名字
            type: 'datePickerTime', //类型
            placeholder: '创建时间',
            value: '', //绑定的值
            sort: 6,
        },

    ])
    /**
     * 查询
     */
    function handleQuery() {
        loading.value = true;
        getPageList(searchForm)
                .then(({ data }) => {
                    tableData.value = data.records;
                    total.value = data.total;
                }).finally(() => {
                    loading.value = false;
                });
    }
</script>

总结

本文介绍了如何使用Element Plus封装前端表格搜索条件。通过合理的设计和实现，我们可以构建出一个易于使用、功能强大的搜索功能，提高用户的数据检索效率和使用体验。同时，我们也需要注意性能优化和功能扩展的问题，以满足不同场景下的需求。

前端老曹
关注
  • 82
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
vue3 表格组件封装复用
02-27
在Vue3中，组件封装是提高...总之，这个Vue3表格组件封装项目旨在教会开发者如何在Vue3中创建高度可复用的组件，同时增强业务处理能力。通过实践这个项目，你将深入理解Vue3的组件化开发方式，提升你的前端开发技能。
vue项目element plus table表格和form搜索条件的二次封装
SunnyRun
04-26 1962
table表格的二次封装和Search的二次封装。表格根据自己喜好把请求层拆出来，引用上面；form 表单，搜索条件的二次封装，常用标签；
ElementPlus的Table搜索功能（setup+ts）
qq_45820271的博客
03-26 1841
Element-plusTable中通过关键字进行搜索
vue3+element plus实现查询条件展开和收起功能
this_zq的博客
11-29 2331
如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。
Vue3+Element-Plus 实现表单中搜索功能 三五
热门推荐
build2024
12-27 1万+
1. 当用户在表单搜索框中，输入要搜索的用户名，点击搜索按钮后，查找到相对应的用户数据 2. 实现搜索功能的步骤 2.1 首先，使用v-model 指令，将文本输入框的数据与 data 中的数据做双向绑定 2.2 其次，为搜索按钮绑定单击事件，并调用事件函数。只要点击按钮，就发起一次查询请求。 2.2 接着，优化文本输入框，在文本框尾部添加清除功能，当用户点击清除后，文本框数据被重置（清空），同时触发一个事件，查询出所有的账户信息。 通过Input 事件，给当前文本框架...
Element-plus封装搜索组件
最新发布
JackChan
05-08 564
Element-plus封装搜索组件
element ui 树形表格按多条件查询（前端处理）
weixin_44274094的博客
08-05 2482
边输入边查询，实现多条件查询树形表格。
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue封装的可编辑表格插件方法
10-18
今天小编就为大家分享一篇Vue封装的可编辑表格插件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue全家桶+ElementUI后台管理项目模板.zip
05-09
在项目中进行二次封装，通常是为了更好地适应项目需求，例如添加全局配置、拦截器、错误处理等，使其更易于管理和使用。 2. **Vuex的搭建**：Vuex 是Vue的状态管理库，它集中管理应用中的所有组件的状态，并提供...
Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题
技术前端，忠于热爱 @0.活在风浪里
01-11 2701
VUE3+TS+Element-Plus项目实战，封装日常表格、表单，设计思路
vue3+element-plus+js 对列表查询/重置条件 组件简单封装
m0_72270036的博客
07-14 1296
在写后台管理的时候会有很多列表，列表上面一般会有查询条件，对列表进行搜索查询，所以就想封装成为组件，就不需要每个页面写一堆的代码，直接循环出来进行遍历即可。
vue3+element-plus 高度封装搜索组件，支持多种类型
鹤渺的星球
10-19 3804
总的来说，封装搜索组件有助于提高前端应用的开发效率、质量和可维护性，特别是在大型应用中或需要频繁使用搜索功能的情况下，封装搜索组件是一个明智的选择。但是！我写的感觉还是不要高级，很多配置都是在业务堆积的过程中，一点点添加的。希望下次写个可扩展性和维护性高的。
vue3 TS Ant Form 封装搜索 组件
MoXinXueWEB的博客
08-25 538
小菜鸟在摸鱼
vue3+element-plus 列表查询条件/筛选条件 组件简单封装
qq_43777788的博客
08-25 5058
写后台管理的时候会有很多列表以及相应的条件查询，所以就想封装成为组件，就不需要每个页面写一堆的代码，直接循环出来，拿出数据就OK了。
Vue + element-ui + TS封装全局搜索组件
三拾的博客
07-03 1385
通过以上步骤，我们成功地封装了一个全局搜索组件，并在Vue项目中使用了它。使用TypeScript可以使我们的代码更加健壮和易于维护。
电子文件封装规范与XML在档案管理中的应用
在规范的1范围部分，明确了该标准适用于电子文件的封装过程，特别是针对档案管理的需求。规范性引用文件部分列出了相关参考标准，这些标准可能包括档案管理、XML技术、元数据标准等，为实现封装提供依据。 术语和...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值