vue中使用filter筛选列表信息

列表筛选地址：https://blog.csdn.net/qq_39101581/article/details/107783302
正则表达式RegExp：http://www.vue5.com/es6/es6_regexp.html
完整代码如下:
包含
1.根据所判断得字段显示不同信息
2.字段搜索筛选
3.类型筛选
4.时间筛选
语法
array.filter(function(currentValue,index,arr), thisValue)

urrentValue必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象

<template><div><!-- 列表信息 --><!-- 搜索框 --><el-input placeholder="请输入内容" v-model="wordKey" style="width: 30%"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><!-- 时间筛选 --><div class="block"><span class="demonstration">默认</span><el-date-pickerv-model="value1"type="monthrange"range-separator="至"start-placeholder="开始月份"end-placeholder="结束月份"></el-date-picker></div><!-- 按钮筛选 --><el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>只显示北京<!-- 下拉框状态筛选 --><el-select v-model="filterType" placeholder="请选择"><el-optionv-for="item in deviceTypeOptions":key="item.Value":label="item.Label":value="item.Value"></el-option></el-select><!-- 表格 --><el-table:data="findItems"borderstyle="width: 100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column><el-table-column fixed prop="date" label="邮箱" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column label="状态" width="120"><template slot-scope="scope"><el-tag :type="statusColors[scope.row.statusss]">{{statuses[scope.row.statusss]}}</el-tag></template></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-column prop="times" label="时间" width="120"> </el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button></template></el-table-column></el-table><el-buttonstyle="margin-top: 50px"size="small":disabled="dis"@click="jdks">查看选中信息</el-button><!-- 详情信息---父组件得数据传给子组件 --><one-demo ref="onedemo" :form-data="formData" @one="two"></one-demo><!-- 子组件得数据传给父组件 --><div @click="two()" :class="{ active: showmode }">{{ ada }}</div></div>
</template><script>
import oneDemo from '../components/xiangQing/oneDemo.vue'
import Parameter from '@/utils/parameters'
export default {name: 'home',components: { oneDemo },data () {return {tableData: [{date: '2016-05-02',name: '十大',province: '上海',statusss: 2,address: '上海市普陀区金沙江路 1518 弄',times: '2021-06-02'}, {date: '1512967795@163.com',name: '骄傲和世界的',province: '北京',statusss: 2,address: '上海市普陀区金沙江路 1517 弄',times: '2021-07-02'}, {date: 'zsdasda',name: 'd阿斯顿',province: '北京',statusss: 1,address: '上海市普陀区金沙江路 1519 弄',times: '2021-08-02'}, {date: '2016-05-03',name: '法国人',province: '北京',statusss: 3,address: '上海市普陀区金沙江路 1516 弄',times: '2021-09-02'}],formData: {},// 复选框查看选中信息按钮dis: true,multipleSelection: [],showmode: true,ada: '78979',i: 1,// 搜索框关键词wordKey: '',// 开关按钮value: true,// 时间筛选框value1: '',// 状态名字statuses: ['未开始', '进行中', '搁置', '完成'],// 标签颜色statusColors: ['info', 'primary', 'warning', 'success'],// 下拉筛选deviceTypeOptions: Parameter.AT.DeviceType.Items,// 绑定下拉框的值filterType: ''}},watch: {},methods: {handleClick (item) {this.formData = itemthis.$refs.onedemo.visible = true},handleSelectionChange (val) {this.multipleSelection = valif (this.multipleSelection.length > 0) {this.dis = false} else {this.dis = true}},jdks () {console.log(this.multipleSelection)},two () {this.i++// 样式得引用或不引用this.showmode = !this.showmodeif (this.i % 2 === 0) {this.ada = 'sdasd'// this.showmode = false} else {this.ada = '8564'// this.showmode = true}}},computed: {// 筛选findItems: function () {var _this = thisreturn _this.tableData.filter((item) => {// 字段筛选var reg = new RegExp(this.wordKey, 'i')return !this.wordKey || reg.test(item.name)}).filter((item) => {// 时间筛选return !this.value1 || (this.value1[0] <= new Date(item.times) && this.value1[1] >= new Date(item.times))}).filter((item) => {// 标签下拉筛选return this.filterType === '' || item.statusss === this.filterType})}}
}
</script><style>
.home {margin-top: 10%;font-size: 2.4em;font-weight: bold;
}
.btn1 {width: 120px;height: 50px;line-height: 50px;border: 1px solid #b93e3e;border: 0;outline: none;
}
.active {width: 120px;height: 50px;line-height: 50px;background-color: aquamarine;border: 1px solid #2a28ac;border: 0;outline: none;
}
</style>

vue中使用filter筛选列表信息相关推荐

vue中使用滚动到列表底部
vue中列表滚动到底部使用原生js,通过div.scrollTop = div.scrollHeight;实现滚动到底部在vue中,可以使用不同的方式: 监听列表数据:当list发生变化时,执行滚 ...
filter vue 循环_vue v-for中使用filter筛选数据
遍历的时候筛选IsUse为true的数据,我这么写问题在哪?为什么加上以后页面上一条数据都没有,去掉filter就有数据了加上filter {{item.RouteName}}{{item.Code ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...
vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...
vue中展示列表，类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名该方法应 ...
python基础一 -------如何在列表字典集合中根据条件筛选数据
如何在列表字典集合中根据条件筛选数据一:列表先随机生成一个列表,过滤掉负数 1,普通for循环迭代判断 2,filter()函数判断,filter(函数,list|tuple|string) 1 ...
vue 点击按钮筛选功能_vue实现前端列表多条件筛选
本文实例为大家分享了vue实现前端列表多条件筛选的具体代码,供大家参考,具体内容如下 1.先上图: 2.搜索条件绑定的数据是: filterForm:{ schoolName:'',//输入的学校名称 ...
python中大于0怎么表示_python怎么筛选列表中大于0的数据？
k17少儿编程网-Scratch_Python_教程_免费儿童编程学习平台 python筛选列表中大于0的数据的方法:k17少儿编程网-Scratch_Python_教程_免费儿童编程学习平台 1.使 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
[转载] Python中filter筛选函数匿名参数问题
参考链接: python中的filter 最近在学习python,觉得有个地方很有意思,稍作记录,方便以后查阅. Python内建的filter()函数用于过滤序列. 简单来讲,就是针对一个序列中的每 ...

vue中使用filter筛选列表信息

vue中使用filter筛选列表信息相关推荐

最新文章

热门文章