vue3组合式API 实现搜索功能(element-plus)

原创已于 2022-09-11 18:37:43 修改 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-08-29 14:10:14 首次发布

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue实现的表格搜索功能，通过监听输入框的变化实时更新显示数据，并提供了取消搜索的功能。示例中包含了基本的数据结构和相关事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//搜索功能
let searchValue = ref(""); //搜索框绑定值

let Search = () => {
     if(searchValue.value.length==0){
      showdata.value=data;
     }
     else{
      showdata.value = data.filter((data)=>{
        return data.username.search(searchValue.value)!=-1
      })
     }
};

//搜素取消事件
let cancal = ()=>{
  showdata.value=data
  
}


// 表格列数据
var data = [
  { id: 1, username: "wyh", sex: "男", phone: "15660532032" },
  { id: 2, username: "你d", sex: "男", phone: "15660532032" },
  { id: 3, username: "你w", sex: "男", phone: "15660532032" },
  { id: 4, username: "你a", sex: "男", phone: "15660532032" },
];
//初始表格数据
const showdata = ref([])

初始

搜索

搜索框清除事件

搜索框内容变化事件

  <el-input
        class="userinput"
        v-model="searchValue"
        size="large"
        suffix-icon="Search"
        clearable
        @clear="cancal" 
        @input="Search"
        >输入框</el-input
      >