I'm currently working on creating dynamic tables in Vue using loops where users 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>
I am trying to enable a search functionality that can search through all the columns of any uploaded table by the user. I've come across solutions for fixed tables but they don't apply to mine. I attempted to write a loop and return 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
}
}
}
Any suggestions on how I can achieve searching through all columns of any uploaded table are welcome!