的筛选功能，有什么思路和
实现方法吗？
大致思路如下：
1.建立一个带有
多个筛选
条件的表格或列表；
2.根据每个筛选
条件的取值情况，生成一个筛选
条件数组，其中每个元素都表示一个
条件；
3.对筛选
条件数组进行遍历，根据
条件类型是and还是or来判断是对全部
条件取交集还是取并集；
4.将符合
条件的数据筛选出来，渲染到页面上。
具体
实现方法可以参考如下代码：
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<span>{{ item.name }}</span>
<select v-model="item.condition">
<option v-for="(conditionItem, conditionIndex) in conditions" :key="conditionIndex" :value="conditionItem.value">
{{ conditionItem.label }}
</option>
</select>
<input v-model="item.value" />
</div>
<button @click="filterData">筛选</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>颜色</th>
</tr>
</thead>
<tbody>
<tr v-for="(dataItem, dataIndex) in filteredData" :key="dataIndex">
<td>{{ dataIndex }}</td>
<td>{{ dataItem.name }}</td>
<td>{{ dataItem.price }}</td>
<td>{{ dataItem.color }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: "名称", condition: "", value: "" },
{ name: "价格", condition: "", value: "" },
{ name: "颜色", condition: "", value: "" },
],
data: [
{ name: "商品1", price: 100, color: "红色" },
{ name: "商品2", price: 200, color: "蓝色" },
{ name: "商品3", price: 150, color: "绿色" },
{ name: "商品4", price: 300, color: "黄色" },
],
conditions: [
{ label: "请选择", value: "" },
{ label: "等于", value: "==" },
{ label: "不等于", value: "!=" },
{ label: "大于", value: ">" },
{ label: "小于", value: "<" },
],
filteredData: [], // 定义一个空数组存放筛选出来的数据
};
},
methods: {
filterData() {
this.filteredData = this.data.filter((item) => {
// 构造筛选
条件数组
const filters = this.items
.filter((item) => item.condition && item.value)
.map((item) => ({
key: item.name,
value: item.value,
operator: item.condition,
}));
// 若没有筛选
条件，则全部通过
if (!filters.length) {
return true;
}
// 对
条件数组进行遍历，找出筛选出来的数据
return filters.reduce((prev, filter) => {
if (filter.operator === "==") {
return prev && item[filter.key] == filter.value;
} else if (filter.operator === "!=") {
return prev && item[filter.key] != filter.value;
} else if (filter.operator === ">") {
return prev && item[filter.key] > filter.value;
} else if (filter.operator === "<") {
return prev && item[filter.key] < filter.value;
} else {
return prev;
}
}, true);
});
},
},
};
</script>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
