声明:1,下面内容是在vue手脚架中进行的,即 npm 打开的 vue 工程中进行的。
2,并用 npm 下载了 element-UI 组件。如果感觉不方便,可以换成你方便的table表格。
根据姓名(name)或者年龄(age)查询(支持小写查询):
export default {
data() {
return {
value: '',
tableData: [
{ name: '小明', age: '18' },
{ name: '小红', age: '17' },
{ name: '桃红', age: '17' },
{ name: '桃儿', age: '18' },
{ name: '老A', age: '18' },
{ name: 'Blue', age: '18' },
],
//表格B用原表格的数据
tableDataB: [
{ name: '小明', age: '18' },
{ name: '小红', age: '17' },
{ name: '桃红', age: '17' },
{ name: '桃儿', age: '18' },
{ name: '老A', age: '18' },
{ name: 'Blue', age: '18' },
],
};
},
methods: {
// 点击搜索 支持模糊查询
search() {
//表格用原表格的数据 即 用于搜索的总数据
this.tableData = this.tableDataB;
//获取到查询的值,并使用toLowerCase():把字符串转换成小写,让模糊查询更加清晰
let _search = this.value.toLowerCase();
let newListData = []; // 用于存放搜索出来数据的新数组
if (_search) {
//filter 过滤数组
this.tableData.filter((item) => {
// newListData中 没有查询的内容,就添加到newListData中
if (
item.name.toLowerCase().indexOf(_search) !== -1 ||
item.age.toLowerCase().indexOf(_search) !== -1
) {
newListData.push(item);
}
});
}
//查询后的表格 赋值过滤后的数据
this.tableData = newListData;
},
},
};
#app {
width: 1024px;
margin: 0 auto;
}
欢迎各位大佬指导批评!