[Vue]如何实现一个简单的表格数据筛选查找(根据ElementUI表格展示)(数组筛选)

[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)

能够解决的问题

• 在一个完整的数据数据渲染的 elementui 表格组件中，筛选输出数据

目录

• 布局代码 样式代码 vue代码
• 布局展示
• 功能实现
• 逻辑解析

布局代码

• 样式代码

*{margin:0;padding:0;}
#app{
background:#ccc;
}
.header{
width:100%;
margin-bottom:30px;
}
.content{
padding-left:30px;
}
.row1{
height:60px;line-height:60px;margin:10px 0;
}
.eltable1{
overflow: scroll;
}


• js[Vue]代码

import comtitle from "./children/comtitle";
// 这里是我自定义的组件！不要复制
export default {
name: "demo2",
data(){
return{
studentsList:[],
studentsNewList:[],
inputName:'',
inputId:null,
options:[
{value:0,label:'全部'},
{value:1,label:'男'},
{value:2,label:'女'}
],
value:0
}
},
methods:{
getStudentsNum() {
this.$axios.get('http://127.0.0.1:9091/getall').then(result => {
this.studentsNewList = this.studentsList = result.data
}).catch(err => {
console.log(err)
})
},
searchId(keywords) {
return this.studentsList.filter(item =>{
if(item.id == keywords) {
return item
}
})
},
searchName(keywords) {
return this.studentsList.filter(item =>{
if(item.name.includes(keywords)){
return item
}
})
},
searchsex(keywords) {
return this.studentsList.filter(item =>{
if(item.sex.includes(keywords)){
return item
}
})
},
numberToSex(num){
return num==1?'男':'女'
}
},
created() {
this.getStudentsNum()
},
watch:{
inputId: function(val) {
if(val == ''){
this.studentsNewList = this.studentsList
}else{
this.studentsNewList = this.searchId(val)
}
},
inputName: function(val) {
if(val == ''){
this.studentsNewList = this.studentsList
}else{
this.studentsNewList = this.searchName(val)
}
},
value: function(val) {
if(val == 0){
this.studentsNewList = this.studentsList
}else{
this.studentsNewList = this.searchsex(this.numberToSex(val))
}
}
},
components:{
comtitle // 自定义的组件，与本文无关
}
}



功能实现

逻辑解析

0. 数组数据类型

{id:1,name:‘余强’,sex:‘男’,ctime:new Date()},
{id:2,name:‘萧芳’,sex:‘女’,ctime:new Date()},

1. 使用 watch 监听三个输入框的变量变化

• 我在事先将数据数据拷贝了两份，studentsNewList用来渲染数组，而studentsList作为原始数据方便恢复
• 监听输入框的变化，如第一个：如果inputid绑定的数据发生变化，那么调用searchId事件，并将值作为参数传递；如果值变为空，那么将渲染数据恢复到原数据
• 性别筛选与其他的不同是多了一个方法，这个方法负责将数字转为性别的文字

watch:{
inputId: function(val) {
if(val == ''){
this.studentsNewList = this.studentsList
}else{
this.studentsNewList = this.searchId(val)
}
},
inputName: function(val) {
if(val == ''){
this.studentsNewList = this.studentsList
}else{
this.studentsNewList = this.searchName(val)
}
},
value: function(val) {
if(val == 0){
this.studentsNewList = this.studentsList
}else{
// console.log(this.numberToSex(val))
this.studentsNewList = this.searchsex(this.numberToSex(val))
}
}
}


2. 事件处理 返回数据

• getStudentsNum：这是我从后端获取数据的方法，请忽略
• searchId : 直接从数组中筛选出 id=参数 的元素，返回这个元素
• searchName : 使用includes()方法，将数组的元素与参数进行逐一匹配，检查是否包含该参数
• searchSex : 返回数组中，性别与参数匹配的元素
• numberToSex : 因为性别选择框的value是0或1或2,如果是0的话那么直接恢复原始数据，不会执行这个事件（详细请看上面）；如果为1那么返回男给调用者，如果不为1返回女给调用者。（调用者接到返回值后会将此返回值作为参数，调用searchSex方法，具体请看上方代码）

getStudentsNum() {
this.$axios.get('http://127.0.0.1:9091/getall').then(result => {
// console.log(result)
this.studentsNewList = this.studentsList = result.data
}).catch(err => {
console.log(err)
})
},
searchId(keywords) {
return this.studentsList.filter(item =>{
if(item.id == keywords) {
return item
}
})
},
searchName(keywords) {
return this.studentsList.filter(item =>{
if(item.name.includes(keywords)){
return item
}
})
},
searchsex(keywords) {
return this.studentsList.filter(item =>{
if(item.sex.includes(keywords)){
return item
}
})
},
numberToSex(num){
return num==1?'男':'女'
}


3. data中的数据解析

• studentsList和studentsNewList最初都是原始数组数据，但不同的是studentsNewList直接渲染表格，也会被直接筛选用返回值渲染表格，而studentsList起到一个保存原始数据的作用
• inputName和inputId都是输入框绑定变量
• options数组是elementui选择框的数据需要，而value变量则用于接收它的选择结果

data(){
return{
studentsList:[],
studentsNewList:[],
inputName:'',
inputId:null,
options:[
{value:0,label:'全部'},
{value:1,label:'男'},
{value:2,label:'女'}
],
value:0
}
}


创作不易 感谢支持