vue多条件查询

封小荷

于 2019-08-23 11:50:57 发布

阅读量9.6k

点赞数 5

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

本文链接：https://blog.youkuaiyun.com/qq_41186500/article/details/100034203

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<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"
        />
        <

最低0.47元/天解锁文章