前端搜索过滤表格数据

最新推荐文章于 2024-08-20 18:04:12 发布

Ybittersweet

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量254

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Ybittersweet/article/details/134058518

版权

文章介绍了如何使用纯前端技术，如ElementUI的El-Input组件，实现在表格数据中按工况名和测点名进行过滤，并演示了如何调用接口查询数据以满足搜索需求。

摘要由CSDN通过智能技术生成

一，纯前端过滤表格数据

 <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;
        },

二，调接口查询

<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
        },