So I am creating tables in vue using loops, i.e. anyone can upload a table and view it.
<el-table :data="filtered" border style="width: 100%" height="500" @selection-change="handleSelectionChange" @header-click="contextmenu">
<el-table-column type="selection" width="55"/>
<el-table-column fixed v-for="col in columns" :prop="col.field" :label="col.field" :key="col.field"/>
<el-table-column>
<template #header>
<el-input v-model="searchQuery" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="warning" round v-on:click="getdata(selected_data,source)">Update-Data</el-button>
</div>
I and trying to implement a search feature that is dynamic, i.e. it can search through all the columns of any table uploaded by user. I saw some solutions online but they are for fixed tables. I also tried writing a loop and returning the data
computed: {
filtered (){
if(this.searchQuery){
return this.d.filter((item)=>{
for(let i=0;i<this.columns.length;i++){
const x=this.columns[0].field //I have an array columns which has all the columns inside
//of it in a dictionary
console.log(item.x.startsWith(this.searchQuery)) //this gives an error *Cannot read
//properties of undefined (reading
//'startsWith')*
}
return item.Name.startsWith(this.searchQuery); // and this line works perfectly fine, if I
//the table has a column named **Name**
})
}else{
return this.d; //d is the data array
}
}
}
Is there a way I can search through all the columns of any table uploaded by the user? Any suggestions are greatly appreciated.
I solved it by using item[x] instead of item.x.