[英]VueJs - Table pagination and filter
我正在使用Vue2.js
和Element UI
作为框架。 我希望能够过滤 切片的表格。 为此,我使用table
和filter
组件,其文档可在此处找到。
表没有切片。 当您选择一个过滤器时,循环遍历每一行并检查该列的值是否等于过滤器。
桌子被切成薄片。 当您选择过滤器时,循环将通过切片结果的每一行,并检查列的值是否等于过滤器。 通过这样做,我们不会过滤“隐藏”值。
我做了一点https://jsfiddle.net/acm3q6q8/3/,所以更容易理解。
所有这一切都有意义,因为我不是在处理整个数据,而是在切片版本上。
一种解决方案可能是隐藏行而不是通过切片数据来排除它们,但我想知道是否有更好的解决方案?
jsfiddle
,只显示2个项目。 tag
以仅显示标记为Office
行 由于tag
为office的行不是切片表的一部分,因此不显示任何行。
过滤时,我想考虑不一定要显示的行。
这应该适用于多个过滤器(即我选择几个标签)
在相同的范围内,如果您想按字母顺序对名称进行排序,如果您只显示2个项目,则不会显示Albert。
您可以在表组件上处理filter-change
事件( 此处记录 ),并自行过滤/切片。
var Main = {
data() {
return {
numberItemToShow : 4,
tableData: [...],
filter: []
}
},
computed : {
filterData() {
if (!this.filter.length)
return this.tableData.slice(0, this.numberItemToShow)
else
return this.tableData
.filter(row => this.filter.includes(row.tag))
.slice(0, this.numberItemToShow);
}
},
methods: {
onFilterChange(filters){
if (filters.tag)
this.filter = filters.tag;
}
}
}
和模板
<template>
<input v-model="numberItemToShow" placeholder="edit me">
<p>Number of item to display: {{ numberItemToShow }}</p>
<el-table ref="tab" :data="filterData" border style="width: 100%" @filter-change="onFilterChange">
<el-table-column prop="name" label="Name" sortable>
</el-table-column>
<el-table-column prop="tag" label="Tag" column-key="tag" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]">
<template scope="scope">
<el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
例子 。
问题是切片是在过滤之前完成的。 过滤器必须查看原始数据,行计数必须是过滤的一部分。
由于过滤器一次查看一行,因此跟踪匹配的行有点棘手。 我在这里做的是保持匹配行的计数器,当被查看的行是第一行数据时,这些行重置为零。 这很hacky,但它确实有效。 可能有更好的方法; 我不熟悉表格小部件。
var Main = { data() { return { numberItemToShow : 4, tableData: [{ name: 'One', tag: 'Home' }, { name: 'Two', tag: 'Home' }, { name: 'Three', tag: 'Home' }, { name: 'Four', tag: 'Office' }], scratchCounter: 0 } }, methods: { filterTag(value, row) { const matched = row.tag === value; if (row === this.tableData[0]) { this.scratchCounter = 0; } if (matched) { ++this.scratchCounter; } return this.scratchCounter <= this.numberItemToShow && matched; } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui/lib/index.js"></script> <div id="app"> <template> <input v-model="numberItemToShow" placeholder="edit me"> <p>Number of item to display: {{ numberItemToShow }}</p> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="tag" label="Tag" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]" :filter-method="filterTag"> <template scope="scope"> <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" close-transition>{{scope.row.tag}}</el-tag> </template> </el-table-column> </el-table> </template> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.