vue3+Element Plus 使用filter()实现搜索功能

效果视频：

1656295489140

更多属性请看Element Plus输入框官方文档：https://element-plus.gitee.io/zh-CN/component/input.html#input-属性

<template>
    <el-input v-model="search" size="default " placeholder="请输入姓名搜索" clearable @clear="clear" @keyup.enter.native="searched" />
</template>

js部分：

<script>
    const search = ref(''); //姓名
    const arr = ref([]);//声明一个新数组

    //确认按钮点击事件
    const searched = () => {
        //判断search的值不为空
        if (search.value !== '') {
            //tableData.value为表格数据的值
			arr.value = tableData.value.filter(item => item.name.indexOf(search.value) !== -1)
			if (arr.value) {
				tableData.value = arr.value
			}
		}
    }

    //监听输入框的值，当值为空时调用表格原始数据的函数
    watch(search, (newName, oldName) => {
		if (newName == '') {
			fun()
		}
	});
</script>