[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">&nbsp;</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">&nbsp;</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
        }
      }

创作不易 感谢支持