vue实现搜索功能

简介: vue实现搜索功能

通过列表里面的月份来进行搜索

需要用到日期选择器和filter方法

1,日期选择器

<el-date-picker v-model="table.value" type="month" @change="seaDate" format="YYYY-MM" value-format="YYYY-MM"
      placeholder="请选择凭证年-月搜索" />
//把日期选择器的type设置为month即可搜索年月
//绑定一个v-model值和用来搜索的change事件

2,事件里面

const ChangeYear = ()=>{
    console.log(table.value);
    if(table.value){
    let a = table.searchData.filter((item)=>table.value == item.nowdate)
    table.oneList = a;
    }else{
      one();
    }
  }

通过filter过滤到有那个值的,如果有就对表格进行赋值,如果日期选择器的值为空那就重新调用列表

相关文章
|
23小时前
|
JavaScript 前端开发 API
|
23小时前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
18小时前
|
JavaScript
|
19小时前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
19小时前
|
JavaScript
|
19小时前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
20小时前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
23小时前
|
JavaScript
|
23小时前
|
JavaScript 前端开发
|
1天前
|
JavaScript 前端开发 网络架构
技术笔记:vue——介绍和使用
技术笔记:vue——介绍和使用