1. Python技术站首页
  2. 其他
  3. Vue

vue实现前端列表多条件筛选

• Vue
yizhihongxing

下面是“vue实现前端列表多条件筛选”的完整攻略：

准备工作

首先需要引入Vue.js和element-ui组件库。除此之外，还需要一个数据列表和一个查询条件对象。

实现步骤

1. 查询条件的展示

使用element-ui组件库提供的Form组件渲染查询表单。每个查询条件使用FormItem包装，FormItem的label属性即为查询条件的名称，Prop属性指定了该查询条件在查询条件对象中的属性名称。例如，要实现一个“用户名”查询条件，可以这样写：

<el-form-item label="用户名" prop="username">
  <el-input v-model="queryForm.username"></el-input>
</el-form-item>

这里的queryForm是查询条件对象，在data()中预先定义。

2. 把查询条件传递给后端进行查询

使用axios等网络请求库向后端发送查询请求。把查询条件对象作为请求参数传递给后端，在后端进行查询，返回查询结果。这里需要注意，在axios请求中需要进行queryForm对象的序列化。可以使用qs.stringify方法实现：

axios.get('/api/list', {
  params: qs.stringify(this.queryForm)
}).then((res) => {
  // res为返回的查询结果
})

这里的/api/list是后端接受查询请求的接口。

3. 实现查询条件的重置

使用element-ui提供的Form组件二次封装来实现查询条件的重置。每个FormItem都需要指定一个ref属性，例如：

<el-form-item label="用户名" prop="username" ref="username">
  <el-input v-model="queryForm.username"></el-input>
</el-form-item>

然后在methods里面封装一个resetForm方法，在这个方法里面遍历所有FormItem的ref属性，调用FormItem的resetField方法来实现Form组件的重置：

methods: {
  resetForm() {
    Object.keys(this.$refs).forEach((key) => {
      if (this.$refs[key][0] instanceof Vue.$options.components.ElFormItem) {
        this.$refs[key][0].resetField();
      }
    });
  }
}

4. 实现多条件筛选

每个FormItem的change事件可以用来进行多条件筛选。在change事件里面重新发送查询请求，以获取符合所有条件的查询结果：

<el-form-item label="用户名" prop="username" ref="username">
  <el-input v-model="queryForm.username" @change="submitQuery"></el-input>
</el-form-item>

在methods里面封装一个submitQuery方法，在这个方法里面执行axios请求，获取查询结果。

示例

示例1

通过Vue实现一个简单的三条件筛选：

<template>
  <div>
    <el-form :inline="true" :model="queryForm" label-width="100px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="queryForm.username" @change="submitQuery"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="queryForm.email" @change="submitQuery"></el-input>
      </el-form-item>
      <el-form-item label="年龄区间">
        <el-input-number v-model="queryForm.age_min" :min="0"></el-input-number>
        <span> 至 </span>
        <el-input-number v-model="queryForm.age_max" :min="0"></el-input-number>
        <el-button type="primary" @click="submitQuery">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;">
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

export default {
  name: 'List',
  components: {
  },
  data() {
    return {
      queryForm: {
        username: '',
        email: '',
        age_min: null,
        age_max: null,
      },
      tableData: [],
    };
  },
  methods: {
    submitQuery() {
      axios.get('/api/search', {
        params: qs.stringify(this.queryForm)
      }).then((res) => {
        this.tableData = res.data.list;
      });
    },
    resetForm() {
      Object.keys(this.$refs).forEach((key) => {
        if (this.$refs[key][0] instanceof Vue.$options.components.ElFormItem) {
          this.$refs[key][0].resetField();
        }
      });
      this.queryForm = {
        username: '',
        email: '',
        age_min: null,
        age_max: null,
      };
    },
  },
  mounted() {
    this.submitQuery();
  }
};
</script>

要求后端接口接受查询请求的参数：

{
  username: '', // 查询用户名
  email: '', // 查询邮箱
  age_min: null, // 年龄最小值
  age_max: null, // 年龄最大值
}

后端查询结果返回格式：

{
  total: 50, // 总数
  list: [{ // 数据列表
    username: 'admin', // 用户名
    email: 'admin@admin.com', // 邮箱
    age: 20, // 年龄
    status: 'normal', // 状态
  }],
}

示例2

通过Vue实现一个按条件查询文章列表的示例：

<template>
  <div>
    <el-form :inline="true" :model="queryForm" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryForm.title" @change="submitQuery"></el-input>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="queryForm.category" @change="submitQuery">
          <el-option label="全部" value=""></el-option>
          <el-option label="前端" value="frontend"></el-option>
          <el-option label="后端" value="backend"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-select v-model="queryForm.tags" multiple @change="submitQuery">
          <el-option label="Vue.js" value="vue"></el-option>
          <el-option label="React" value="react"></el-option>
          <el-option label="Angular" value="angular"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" prop="time">
        <el-date-picker type="daterange" v-model="queryForm.time" @change="submitQuery"></el-date-picker>
        <el-button type="primary" @click="submitQuery">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="category" label="分类"></el-table-column>
      <el-table-column prop="tags" label="标签">
        <template v-slot="{ row }">
          <el-tag v-for="tag in row.tags" :key="tag">{{ tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="发布时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';

export default {
  name: 'List',
  components: {
  },
  data() {
    return {
      queryForm: {
        title: '',
        category: '',
        tags: [],
        time: '',
      },
      tableData: [],
    };
  },
  methods: {
    submitQuery() {
      axios.get('/api/search', {
        params: qs.stringify(this.queryForm)
      }).then((res) => {
        this.tableData = res.data.list;
      });
    },
    resetForm() {
      Object.keys(this.$refs).forEach((key) => {
        if (this.$refs[key][0] instanceof Vue.$options.components.ElFormItem) {
          this.$refs[key][0].resetField();
        }
      });
      this.queryForm = {
        title: '',
        category: '',
        tags: [],
        time: '',
      };
    },
  },
  mounted() {
    this.submitQuery();
  }
};
</script>

要求后端接口接受查询请求的参数：

{
  title: '', // 查询标题
  category: '', // 查询分类
  tags: [], // 查询标签
  time: '', // 发布时间
}

后端查询结果返回格式：

{
  total: 50, // 总数
  list: [{ // 数据列表
    title: 'Vue.js 入门教程', // 标题
    category: 'frontend', // 分类
    tags: ['vue', 'javascript'], // 标签
    time: '2022-01-01 12:00:00', // 发布时间
  }],
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue实现前端列表多条件筛选 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue项目优化打包之前端必备加分项

    针对“Vue项目优化打包之前端必备加分项”的完整攻略，我分别从以下三个方面进行详细的讲解： 代码规范化和优化 webpack的性能调优 最佳实践 代码规范化和优化 代码规范：在Vue开发中，代码规范可以通过使用ESLint和Prettier等工具进行检查和格式化，以确保代码的可读性和可维护性。此外，可以使用Husky和Lint-staged等工具，将代码规范…

    Vue 2023年5月27日
    00

  • 分享Vue组件传值的几种常用方式(一)

    下面我会详细讲解“分享Vue组件传值的几种常用方式(一)”的完整攻略。 标题分析 标题：“分享Vue组件传值的几种常用方式(一)” 分析：该标题属于文档类文章，主要内容是针对Vue组件传值方面的一些常用方式进行介绍。 文章结构 引言：介绍Vue组件传值的重要性和文章将要介绍的内容。 父组件向子组件传值的方式： props属性 和 \$emit方法 对prop…

    Vue 2023年5月27日
    00

  • vue-cli3使用mock数据的方法分析

    vue-cli3使用mock数据的方法分析 什么是Mock数据 在前端开发中，当需要访问后端接口来获取数据时，如果后端接口还没有开发完成或者还没有部署到服务器中，前端开发人员就无法进行开发工作。而使用Mock数据可以解决这个问题。 Mock数据是指在前端开发中，为了模拟真实的后端接口数据而创建的一组模拟数据，可以使用一些工具快速生成，比如json-serve…

    Vue 2023年5月28日
    00

  • BootstrapValidator实现表单验证功能

    下面是关于“BootstrapValidator实现表单验证功能”的完整攻略。 什么是BootstrapValidator？ BootstrapValidator是一个基于Bootstrap的表单验证插件。它允许您轻松地添加表单验证到Web表单中，并支持各种验证规则，例如必填字段、电子邮件、URL、日期等。 如何使用BootstrapValidator？ 首…

    Vue 2023年5月28日
    00

  • 详解Vue2.0 事件派发与接收

    下面我会详细讲解“详解Vue2.0 事件派发与接收”的完整攻略。 什么是事件派发与接收 在Vue中，事件可以从父组件向子组件传递（事件派发），也可以从子组件向父组件传递（事件接收）。这种事件的传递机制，可以实现组件之间的通信和数据交互，非常强大。 事件派发 在父组件中，我们可以通过$emit方法派发事件，传递数据给子组件。代码示例如下： <templa…

    Vue 2023年5月28日
    00

  • 浅析vue深复制

    浅析vue深复制 什么是深复制 在编程中，复制一个对象并不是简单地复制原先的地址，而是将原对象的所有数据都复制到一个新的内存地址中，我们称之为复制对象。当我们在拷贝一个对象的时候，有可能会遇到”浅复制”和”深复制”。 浅复制：复制对象时，指向某个指针的指针只能复制指针的值，而不能复制所指向的对象。因此，当我们改变所指向对象的内容时，指针也会发生相应的变化。 …

    Vue 2023年5月28日
    00

  • 面试问题Vue双向数据绑定原理

    面试问题Vue双向数据绑定原理 前言 在Vue中，双向数据绑定是一项非常重要的特性，也是其比较独特的特性之一。理解Vue中双向数据绑定的原理，是面试Vue开发岗位的常见问题之一。本篇文章将从以下几个方面来讲解Vue双向数据绑定的原理：Vue的响应式系统、Object.defineProperty()、实现双向绑定的具体原理以及如何自定义实现双向绑定。 Vue…

    Vue 2023年5月28日
    00

  • Vue 实现一个命令式弹窗组件功能

    实现一个命令式弹窗组件的过程分为以下几步： 步骤一：创建组件 首先需要定义一个 Vue 组件，用于创建相应的弹窗窗口。在组件的模板中，可以使用 v-if 控制弹窗的显示与隐藏，并通过插槽的方式将内容插入到弹窗中。 <template> <div class="dialog-mask" v-if="visible…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部