前端搜索过滤表格数据

一，纯前端过滤表格数据

 <el-input v-model="searchName" placeholder="请搜索工况名" @blur="searchCondition" style="margin-left:20px ;"> </el-input>
 <el-input v-model="searchName1" placeholder="请搜索测点名" @change="searchTest" style="margin-left:20px ;"> </el-input>
  <div style="display: flex;margin: 20px 0px 0px 10px;">
                        <div class="condition">
                        <div class="top">工况名</div>
                        <div class="bottom">
                            <div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"
                                v-for="(item, index) in tableList" :key="index">{{ item.datafile }}</div>
                        </div>
                    </div>
                    <div class="test">
                        <div class="top1">测点名</div>
                        <div class="bottom1">
                            <div @click="handlePointClick(index)"
                                :class="[selectedPointIndex == index ? 'color1' : '', 'item1']"
                                v-for="(point, index) in TestList" :key="index">{{ point.testpointname }}</div>
                        </div>
                    </div>
                    <div v-loading="loading" element-loading-text="拼命加载中"
                        element-loading-background="rgba(122, 122, 122, 0.8)" ref="chart"
                        style="width:120%;margin-left: 50px;"></div>
                    </div>
    tableList:[],
    tableData: [],
    TestList:[],
    pointData: [],
    searchName:'',
    searchName1:'',
   // 搜索工况名
  async searchCondition(){
    const filteredData = this.tableData.filter(item => item.datafile === this.searchName);
    this.tableList = filteredData.length > 0 ? filteredData : this.tableData;
        },
   // 搜索测点名
  async searchTest(){
    const filteredData = this.pointData.filter(item => item.testpointname === this.searchName1);
    this.TestList = filteredData.length > 0 ? filteredData : this.pointData;
        },
       
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

二，调接口查询

<el-input v-model="searchTaskName" placeholder="按型号搜索" class="input" 
style="width: 30%; margin: 10px;"@change="searchProjects"></el-input>
// 搜索卡片
        async searchProjects() {
        const data  =  await GetAllTestProject({modelname:this.searchTaskName} )
          this.cardData = data.data.data.testProjects
        },
1
2
3
4
5
6
7