如何解决如何在v-data-table中添加搜索/过滤方法?
使用过滤器方法在v-data-tabel中进行了搜索和过滤功能,并且包括了Javascript中的方法。 但这没用。 我已经检查过开发工具,但是没有发生错误。 我认为计算机方法在我的情况下更好,所以 我试图使getter方法,而不是计算。 有人知道那种情况下哪种方法更好吗?
有人帮我吗?
<template>
<div>
<h2>{{ message }}</h2>
<v-text-field type="text" v-model="search"></v-text-field>
<v-data-table
dense
:headers="header"
:items="items"
class="elevation-1"
>
<template v-slot:items="{ search_users}">
<tbody>
<tr v-for="item in search_users" :key="item.email">
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.website}}</td>
</tr>
</tbody>
</template>
</v-data-table>
</div>
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import axios from 'axios'
@Component({})
export default class extends Vue{
message:string='Search/Filter In Table'
search:string=''
header = [
{text:'name',value:'name'},{text:'email',value:'email'},{text:'website',value:'website'}
]
items:any=[]
get search_users(){
return this.items.fileter((item:any)=>{
return item.name.includes(this.search)
})
}
async mounted(){
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
this.items = response.data.map((item:any)=>({
name:item.name,email:item.email,website:item.website
}));
}
}
</script>
解决方法
该表的数据通过其items
属性提供。因此,如果您希望表格显示过滤列表,请提供该值。物品栏用于控制单个物品的显示,如果使用默认渲染,则可以省略。
示例:
<template>
<v-data-table
:headers="header"
:items="search_users"
></v-data-table>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。