一,纯前端过滤表格数据
<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
},