vue实现表格过滤功能

2024-12-01 16:58:57

本文实例为大家分享了vue实现表格过滤功能的具体代码，供大家参考，具体内容如下

效果：

组件代码：

<template>
 <div>
 <input type="text" v-model="searchText">

 <ul>
 <li v-for="(book, index) in filterBooks" :key="index">
  序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
 </li>
 </ul>

 <div>
 <button @click="setOrderType(2)">价格升序</button>
 <button @click="setOrderType(1)">价格降序</button>
 <button @click="setOrderType(0)">原始顺序</button>
 </div>
 </div>
</template>

<script>

export default {
 name:"filter1",

 data () {
 return {
  searchText: '',
  orderType: 0, // 0:默认顺序, 1:价格降序, 2:价格升序
  books: [
  {name: 'Vue.js', price:50},
  {name: 'Javascript', price:30},
  {name: 'Css', price:40},
  {name: 'Html', price:60}
  ]
 }
 },
 computed: {
  filterBooks () {
  const {searchText, books, orderType} = this
  let filterArr = new Array();

  // 过滤数组 过滤name键
  filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)

  // 排序
  if(orderType) {
   filterArr.sort(function (p1, p2) {
   if(orderType === 1) { // 降序
    return p2.price - p1.price;
   } else { // 升序
    return p1.price - p2.price;
   }
   })
  }

  return filterArr;
  }
 },
 methods: {
  setOrderType (orderType) {
  this.orderType = orderType
  }
 }
}
</script>

<style>

</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue通过数据过滤实现表格合并

基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉. 所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示代码 <table id="search_tabl
vue实现表格过滤功能

本文实例为大家分享了vue实现表格过滤功能的具体代码,供大家参考,具体内容如下效果: 组件代码: <template> <div> <input type="text" v-model="searchText"> <ul> <li v-for="(book, index) in filterBooks" :key="index"> 序号 : {{index}}, 书
vue实现表格合并功能

本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1.背景本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并. 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React.最后的实现效果是这样的: 2.思路原本的正常表格是这样的: <table > <thead&
vxe-table vue table 表格组件功能

一个功能更加强大的 Vue 表格组件查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格例子 <template> <div> <
vue实现表格分页功能

本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-table v-loading="listLoading" :data=" list.slice((currentPage - 1) * pageSize, currentPage * pageSize) " element-l
Vue Cli与BootStrap结合实现表格分页功能

1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div
Angular实现较为复杂的表格过滤，删除功能示例

本文实例讲述了Angular实现较为复杂的表格过滤,删除功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤.删除</title> <style> table{ border: 1px solid black; w
Vue实现表格批量审核功能实例代码

本文实例为大家分享了Vue实现表格批量审核功能的具体代码,供大家参考,具体内容如下 1 前端部分效果如下图所示: 1.1 html部分 <el-form-item> <el-button type="success" icon="el-icon-search" @click="auditServer()" :disabled="this.sels.length === 0">批量审核</el-b
Vue.js实现可排序的表格组件功能示例

本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns
Vue element-ui表格内嵌进度条功能实现方法

目录一.引言二.方法三.实验结果与讨论 1.前期准备工作 2.实现功能 3完整实验代码四.结语一.引言在着手做项目时,尤其是后台管理系统类的项目,不难会遇到,数据用进度条的形式呈现,可视化. 二.方法本次实验主要应用element组件中的progress. 需要使用到属性: Type 进度条类型line/circle/dashboard :text-inside 进度条显示文字内置在进度条内(只在 type=line 时可用) :percentage 百分比(必填) :color

vue实现表格过滤功能

相关推荐

随机推荐