1. 简介
Vue是一个流行的JavaScript框架，用于构建用户界面和单页应用程序（SPA），而Element-UI是一个基于Vue的UI框架。它提供了各种UI组件和工具，可用于用于快速构建漂亮且易于使用的用户界面。在本文中，我们将使用Vue和Element-UI来演示如何对数据进行筛选和排序。
2. 数据格式
要演示数据筛选和排序，我们将使用以下图书数据作为示例：
const books = [
{ title: '《Vue.js实战》', author: '梁灏', price: 79.0, pubdate: '2018-03-01' },
{ title: '《JavaScript高级程序设计》', author: 'Nicholas C. Zakas', price: 99.0, pubdate: '2013-03-01' },
{ title: '《Node.js开发指南》', author: 'BYVoid', price: 89.0, pubdate: '2012-06-01' },
{ title: '《CSS揭秘》', author: 'Lea Verou', price: 78.0, pubdate: '2015-08-01' },
{ title: '《HTML5与CSS3基础教程》', author: '廖凡', price: 69.0, pubdate: '2014-06-01' },
{ title: '《React Native入门与实战》', author: '顾伟伟', price: 79.0, pubdate: '2016-06-01' },
{ title: '《深入浅出Node.js》', author: '朴灵', price: 59.0, pubdate: '2013-07-01' },
{ title: '《编写高质量代码：Web前端开发修炼之道》', author: '郑晓峰', price: 56.0, pubdate: '2018-05-01' },
{ title: '《JavaScript设计模式与开发实践》', author: '曾探', price: 59.0, pubdate: '2015-06-01' },
{ title: '《ECMAScript 6 入门》', author: '阮一峰', price: 58.0, pubdate: '2015-09-01' }
]
这个数据包含10本书的信息，包括书名、作者、价格和出版日期。我们将使用这些数据进行筛选和排序。
3. 数据筛选
3.1 筛选组件的设计
我们将使用Element-UI的<Input>组件和<Button>组件来创建筛选工具栏：
<template>
<div class="filter-bar">
<el-input
v-model="keyword"
placeholder="请输入关键字"
class="filter-input"
clearable
@clear="handleFilter">
</el-input>
<el-button
type="primary"
icon="el-icon-search"
@click="handleFilter">
筛选
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
keyword: ''
}
},
methods: {
handleFilter() {
this.$emit('filter', this.keyword.trim())
}
}
}
</script>
<style scoped>
.filter-bar {
margin-bottom: 15px;
}
.filter-input {
width: 240px;
}
</style>
在这个组件中，我们创建了一个输入框来输入关键字，并创建了一个筛选按钮来启动筛选操作。当点击筛选按钮时，我们将关键字作为参数通过$emit事件发送到父组件中。
3.2 筛选操作的实现
在使用筛选组件时，我们需要在父组件中处理筛选操作。我们为父组件创建了一个<Result>组件来显示筛选结果：
<template>
<div>
<filter-bar
@filter="handleFilter">
</filter-bar>
<result
:books="filteredBooks">
</result>
</div>
</template>
<script>
import FilterBar from './FilterBar.vue'
import Result from './Result.vue'
export default {
components: { FilterBar, Result },
data() {
return {
books: [...]
}
},
computed: {
filteredBooks() {
return this.books.filter(book => {
const keyword = this.keyword.toLowerCase()
const title = book.title.toLowerCase()
const author = book.author.toLowerCase()
return title.indexOf(keyword) > -1 || author.indexOf(keyword) > -1
})
}
},
methods: {
handleFilter(keyword) {
this.keyword = keyword
}
}
}
</script>
在父组件中，我们创建了一个books数组来保存所有的图书数据。我们使用计算属性filteredBooks来返回筛选后的图书数据。在计算属性中，我们使用filter方法来过滤books数组，只保留满足搜索关键字的项。
为了实现筛选操作，我们必须监测输入框中的关键字变化。对于这个目的，我们在FilterBar组件中使用了v-model来绑定输入框的值，并在点击筛选按钮时通过$emit事件将关键字发送到父组件中。通过这种方式，我们可以实时地更新计算属性中的关键字，从而动态地更新筛选结果。
4. 数据排序
4.1 排序组件的设计
我们将使用Element-UI的<Select>组件来创建排序工具栏：
<template>
<el-select
v-model="sortOrder"
placeholder="请选择排序方式"
class="sort-selector">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
sortOrder: '',
options: [
{ label: '按价格升序排列', value: 'priceAsc' },
{ label: '按价格降序排列', value: 'priceDesc' },
{ label: '按出版日期升序排列', value: 'pubdateAsc' },
{ label: '按出版日期降序排列', value: 'pubdateDesc' }
]
}
},
watch: {
sortOrder() {
this.$emit('sort', this.sortOrder)
}
}
}
</script>
<style scoped>
.sort-selector {
width: 200px;
}
</style>
在这个组件中，我们创建了一个下拉菜单来选择排序方式，并使用v-model来绑定选中项。当选中项发生变化时，我们将进行排序操作，并将排序方式作为参数通过$emit事件发送到父组件中。
4.2 排序操作的实现
在使用排序组件时，我们需要在父组件中处理排序操作。我们可以使用计算属性来返回排序后的图书数据：
<template>
<div>
<sort-selector
@sort="handleSort">
</sort-selector>
<result
:books="sortedBooks">
</result>
</div>
</template>
<script>
import SortSelector from './SortSelector.vue'
import Result from './Result.vue'
export default {
components: { SortSelector, Result },
data() {
return {
books: [...],
sortOrder: ''
}
},
computed: {
sortedBooks() {
const comparator = this.getComparator(this.sortOrder)
return this.books.slice().sort(comparator)
}
},
methods: {
handleSort(sortOrder) {
this.sortOrder = sortOrder
},
getComparator(sortOrder) {
switch (sortOrder) {
case 'priceAsc':
return (a, b) => a.price - b.price
case 'priceDesc':
return (a, b) => b.price - a.price
case 'pubdateAsc':
return (a, b) => new Date(a.pubdate) - new Date(b.pubdate)
case 'pubdateDesc':
return (a, b) => new Date(b.pubdate) - new Date(a.pubdate)
default:
return undefined
}
}
}
}
</script>
在父组件中，我们创建了一个sortOrder变量来保存排序方式。在计算属性sortedBooks中，我们使用slice方法复制books数组，并使用sort方法对复制的数组进行排序，从而避免对原始数组进行改动。
为了实现排序操作，我们必须监测下拉菜单中的选中项变化。对于这个目的，我们在SortSelector组件中使用了v-model来绑定选中项，并在选中项变化时通过$emit事件将排序方式发送到父组件中。通过这种方式，我们可以实时地更新计算属性中的排序方式，从而动态地更新排序结果。
5. 总结
在本文中，我们演示了如何使用Vue和Element-UI来进行数据筛选和排序。我们通过创建筛选组件和排序组件，并在父组件中实现筛选和排序操作，来动态地更新计算属性中的数据。使用Vue和Element-UI可以让我们快速地构建漂亮且易于使用的数据筛选和排序功能。