[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
能够解决的问题
- 在一个完整的数据数据渲染的 elementui 表格组件中，筛选输出数据
目录
- 布局代码 样式代码 vue代码
- 布局展示
- 功能实现
- 逻辑解析
布局代码
<template>
<div id="app">
<el-container>
<el-header class="header">
<comtitle :titlemsg="'查询组件'"></comtitle>
<!--这里是我自定义的组件！不要复制-->
</el-header>
<el-main class="content">
<el-row class="row1">
<el-col :span="2">搜索ID</el-col>
<el-col :span="6">
<el-input v-model="inputId" placeholder="请输入内容"></el-input>
</el-col>
<el-col :span="1"> </el-col>
<el-col :span="2">搜索关键字</el-col>
<el-col :span="6">
<el-input v-model="inputName" placeholder="请输入内容"></el-input>
</el-col>
<el-col :span="1"> </el-col>
<el-col :span="2">性别筛选</el-col>
<el-col :span="3">
<el-select v-model="value" placeholder="请选择性别">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</el-row>
<el-table
:data="studentsNewList"
style="width:95%"
class="eltable1">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="180">
</el-table-column>
<el-table-column
prop="ctime"
label="创建时间">
</el-table-column>
</el-table>
</el-main>
</el-container>
</div>
</template>
- 样式代码
*{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
}
}