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

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

• Vue

下面是“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+echart 展示后端获取的数据实现

    下面我将详细讲解“Vue+echart 展示后端获取的数据实现”的完整攻略。首先我们需要明确几个概念： Vue：一款轻量级的前端框架，可以实现响应式的数据绑定和组件化开发； Echarts：一款强大的可视化图表库，支持多种图表类型和交互方式，可以方便地展示数据； 后端：在本文中，代表数据源，可以是数据库、文件等。 下面我们按照以下步骤来实现： 1. 前端页面…

    Vue 2023年5月27日
    00

  • vue开发中数据更新但视图不刷新的解决方法

    当我们在Vue开发中使用数据绑定时，有时候会遇到数据更新了但视图没有及时刷新的情况，这往往是因为Vue的响应式系统没有及时捕捉到数据的变化。下面我将为您介绍几种解决方案。 1. 使用Vue.set或this.$set强制数据响应式更新 Vue2.0之后提供了Vue.set或this.$set方法，可以用来更新数据并强制响应式系统重新渲染视图。我们可以使用这个…

    Vue 2023年5月29日
    00

  • Vue表单控件数据绑定方法详解

    对于“Vue表单控件数据绑定方法详解”的完整攻略，我可以提供以下内容： Vue表单控件数据绑定方法详解 介绍 Vue是一个流行的JavaScript框架，它允许您创建灵活的用户界面和交互式应用程序。在Vue中，您可以使用“双向数据绑定”功能来轻松处理表单控件的数据。这意味着您可以将表单控件的值绑定到Vue组件中的数据属性，并在组件中自动更新它们。在使用Vue…

    Vue 2023年5月27日
    00

  • Vue3的vue-router超详细使用示例教程

    关于“Vue3的vue-router超详细使用示例教程”的完整攻略，我结合实例分为以下几个部分进行讲解： 一、安装与配置 安装vue-router 要使用vue-router，首先需要安装它，可以通过npm安装，命令如下： npm install vue-router@4.0.0-0 配置vue-router 在使用vue-router之前，需要对它进行配置…

    Vue 2023年5月28日
    00

  • Vue实现万年日历的示例详解

    下面是“Vue实现万年日历的示例详解”的完整攻略。 什么是万年日历？ 万年历是一种用于了解日期和节气变化的工具。它可以显示某一年的每个月份的日历，同时也可以显示节气和一些重要的农历节日。在日常生活中，万年历常常被用于查询特定日期的星期几、农历日期等信息。 如何使用Vue实现万年日历？ 以下是使用Vue实现万年日历的步骤： 第一步：创建Vue应用程序 在htm…

    Vue 2023年5月29日
    00

  • Vue中使用 setTimeout() setInterval()函数的问题

    关于Vue中使用setTimeout()和setInterval()函数的问题，需要考虑到以下几个方面的内容： 在Vue中如何使用setTimeout()和setInterval()函数 在Vue中使用setTimeout()和setInterval()函数需要注意哪些问题 Vue中使用setTimeout()和setInterval()会涉及到的一些示例及…

    Vue 2023年5月29日
    00

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    要实现在VUE v-for循环中每个item节点动态绑定不同函数的实例，可以使用以下步骤： 在每个item节点上绑定一个唯一的key值，以便Vue能够追踪节点的增、删、移动操作。 <ul> <li v-for="(item, index) in items" :key="item.id"> {{…

    Vue 2023年5月28日
    00

  • vue filter 完美时间日期格式的代码

    下面我将为您详细讲解如何实现”Vue Filter 完美时间日期格式的代码”。 什么是 Vue Filter？ Vue Filter 是 Vue.js 框架提供的一种数据过滤器，它可以格式化文本、数字、日期等数据类型，以满足用户的需求。 如何使用 Vue Filter？ 使用 Vue Filter 首先需要在 Vue 实例中定义一个全局的 Filter，示例…

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