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

//搜索功能
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
      >