vue3+Element Plus 使用filter()实现搜索功能
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>
更多推荐
已为社区贡献1条内容
所有评论(0)