vue多条件查询

最新推荐文章于 2024-07-30 16:12:41 发布

封小荷

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量9.5k

点赞数 5

文章标签： vue 表格多条件查询

本文链接：https://blog.csdn.net/qq_41186500/article/details/100034203

版权

本文详细介绍了如何在Vue.js应用中实现多条件查询功能，包括如何设置表格过滤条件，利用 computed 属性进行复杂查询逻辑处理，以及如何实时更新展示的数据。通过对组件的封装和事件的处理，实现了用户交互友好且高效的查询体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div class="app-container">
    <div class="filter-container" style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <span>部门:</span>
        <el-select v-model="search.bumen" placeholder="请选择" >
          <el-option
            v-for="(item,index) in groupname"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        <span>类型：</span>
        <el-select v-model="search.leixin"  placeholder="请选择">
          <el-option
            v-for="item in typeSearchOption"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        </el-select>
        <span>时间：</span>
        <el-date-picker
          v-model="search.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="dateChange"
        />
        <