1.介绍
Vue是一种JavaScript框架，它用于构建交互式用户界面。 Element UI是一个基于Vue框架的组件库，它提供了大量的开箱即用的UI组件，包括表格，表单，弹出框等等。 在本文中，我们将介绍如何使用Vue和Element-UI进行数据筛选和过滤，以便在数据列表中显示所需的信息。
2.准备工作
为了开始使用Vue和Element-UI进行数据筛选和过滤，您需要确保您的系统中安装了Vue和Element-UI。 您可以使用以下命令在系统上安装它们：
npm i vue
npm i element-ui
3.构建一个基本的表格
在此步骤中，我们将构建一个基本的表格，并在其中添加一些示例数据。
首先，在Vue应用程序中创建一个表格组件。我们可以使用Element-UI的el-table组件来实现它。 下面是组件的基本结构：
<template>
<div>
<el-table :data="tableData">
<el-table-column label="日期" prop="date"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: 'John',
address: 'New York'
},
{
date: '2021-01-02',
name: 'Kate',
address: 'London'
},
{
date: '2021-01-03',
name: 'Tom',
address: 'Paris'
},
{
date: '2021-01-04',
name: 'Mary',
address: 'San Francisco'
}
]
}
}
}
</script>
现在，我们在浏览器中打开Vue应用程序，应该可以看到一个包含示例数据的简单表格。
4.启用筛选功能
要启用表格中的筛选功能，我们可以使用Element-UI的el-table-column组件，并将其配置为“筛选列”。
<template>
<div>
<el-table :data="tableData">
<el-table-column label="日期" prop="date" :filters="[{ text: '今天', value: '2021-01-01' }, { text: '昨天', value: '2021-01-02' }, { text: '明天', value: '2021-01-03' }]" :filter-method="dateFilter"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: 'John',
address: 'New York'
},
{
date: '2021-01-02',
name: 'Kate',
address: 'London'
},
{
date: '2021-01-03',
name: 'Tom',
address: 'Paris'
},
{
date: '2021-01-04',
name: 'Mary',
address: 'San Francisco'
}
]
}
},
methods: {
dateFilter(value, row) {
return row.date === value;
}
}
}
</script>
在上面的示例代码中，我们添加了一个简单的筛选器，它允许用户从日期列中选择一个选项来筛选行。 筛选器选项的文本和值是在“filters”属性中指定的。我们还在el-table-column组件中使用“filter-method”属性来指定一个自定义的筛选函数，它将在用户进行筛选时自动调用。
如果您现在运行Vue应用程序并查看表格。 你应该可以看到一个日期列的下拉筛选器，其中包含三个选项：今天，昨天和明天。
4.1 使用筛选器
要使用表格中的筛选器，您只需选择筛选器下拉列表中的选项。 当您选择一个选项时，表格会立即重新渲染，并仅显示与所选选项匹配的行。
5.启用过滤功能
过滤操作与筛选操作类似，但是过滤操作可以应用于多个列，并且可以基于输入的文本进行匹配。 要启用表格中的过滤操作，我们可以使用“filter-多列”属性。
<template>
<div>
<el-table :data="tableData" :header-cell-style="{ background: '#f5f7fa', color: '#333' }">
<el-table-column label="日期" prop="date" filter-placeholder="请输入日期" :filters="[{text: '今天', value: '2021-01-01'}, {text: '昨天', value: '2021-01-02'}, {text: '明天', value: '2021-01-03'}]" :filter-method="filterHandler"></el-table-column>
<el-table-column label="姓名" prop="name" filter-placeholder="请输入姓名"></el-table-column>
<el-table-column label="地址" prop="address" filter-placeholder="请输入地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: 'John',
address: 'New York'
},
{
date: '2021-01-02',
name: 'Kate',
address: 'London'
},
{
date: '2021-01-03',
name: 'Tom',
address: 'Paris'
},
{
date: '2021-01-04',
name: 'Mary',
address: 'San Francisco'
}
]
}
},
methods: {
filterHandler(value, row, column) {
const property = column['property'];
return row[property].indexOf(value) > -1;
}
}
}
</script>
在上面的示例代码中，我们添加了“filter-placeholder”属性，它将在过滤器输入框中显示。 我们在el-table-column组件中使用“filter-method”属性来指定自定义过滤函数，它将在用户进行过滤时自动调用。 该函数获取三个参数：value，row和column，每个参数的含义如下：
value - 用户输入的过滤文本
row - 当前行的数据
column - 当前列的数据
在此示例中，我们使用“indexOf”函数在每个属性中搜索过滤文本。 如果字符串中包含过滤文本，则函数将返回true并显示该行。 如果字符串中不包含过滤文本，则函数将返回false并隐藏该行。
5.1 使用过滤器
要使用表格中的过滤器，您可以在列标题旁边的输入框中输入搜索词。 与筛选器一样，表格将立即重新渲染，以仅显示与所选选项匹配的行。
结论
Vue和Element-UI提供了一种强大的方式来解决复杂的数据筛选和过滤问题。 在本文中，我们介绍了如何使用Vue和Element-UI来构建一个基本的表格，并添加了筛选和过滤功能。 通过使用自定义筛选和过滤函数，您可以实现精细的控制，并根据需要显示和隐藏表格中的行。