如何通过动态表vuejs搜索?

Question

所以我在vue中使用循环创建表，即任何人都可以上传表并查看它。

<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并尝试实现一个动态的搜索特性，即它可以搜索用户上传的任何表的所有列。我在网上看到了一些解决方案，但它们是固定的桌子。我还尝试编写一个循环并返回数据

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

是否有一种方法可以搜索用户上传的任何表的所有列?如有任何建议，不胜感激。

Answer 1

我用item[x]代替item.x解决了这个问题。