基于数据的动态转换过滤器

这里直接使用 Vue作为例子,我们通过模拟一个不断有新数据产生的实时数据集,然后我们需要通过一个过滤参数将过滤后的数据展示出来。

<template>
    <div class="userinfo">
        <div>
        <label for="type">Type Filter: </label>
        <select name="type" id="type" v-model="typeFilter">
            <option value="none">None</option>
            <option v-for="type in typesSet" :value="type" :key="type">{{type}}</option>
        </select>
        <ul>
            <li v-for="item in filteredtypeDataset" :key="item.timestamp">Timestamp: {{item.timestamp}} - Type: {{item.type}} - Value: {{item.value}}</li>
        </ul>
        </div>
    </div>
</template>

“`vue.js
<script>
export default {
name: 'Userinfo',
data() {
return {
dataset: [],
typeFilter: 'none',
typesSet: [ 'nini', 'honghong', 'mingming' ],
};
},
props: [],
components: {},
computed: {
filteredtypeDataset() {
if (this.typeFilter === 'none') {
return this.dataset
}
return this.dataset.filter(item => item.type === this.typeFilter)
}
},
created() {},
methods: {
},
mounted() {
// 模拟流式数据集
setInterval(() => {
const randomType = this.typesSet[Math.round(Math.random() * (this.typesSet.length – 1))]
this.dataset.push({
type: randomType,
timestamp: Date.now(),
value: Math.random().toString(32).substr(2)
})
}, 1e3)
}
};
</script>

<pre><code class="line-numbers">进行构建的数据应用中,也是根据这个 typeSet 来提前生成了一个用于过滤数据的过滤器。

但有的时候前端的数据应用并不知道来自其他数据服务的数据内容究竟有哪些过滤项,那么我们便需要根据数据应用所得到的实际数据来生成过滤器。
“`js

methods: {
mockDataSource(typesSet) {
const dataset = [];
const timer = setInterval(() =&gt; {
const randomType = typesSet[Math.round(Math.random() * (typesSet.length – 1))]
dataset.push({
type: randomType,
timestamp: Date.now(),
value: Math.random().toString(32).substr(2)
})
}, 1e3)
return { dataset, stop() {
clearInterval(timer)
}
}
}
},
mounted() {
// 模拟流式数据集
setInterval(() =&gt; {
const dataSource = this.mockDataSource(Array(10).fill(1).map((_, i) =&gt; `type${i + 1}`)).dataset.type
this.dataset.push({
type: dataSource,
timestamp: Date.now(),
value: Math.random().toString(32).substr(2)
})
}, 1e3)
}

这段代码中我们模拟了一个包含多种可过滤数据type的流式数据集,且该数据集过滤字段内容是“不可预知”的。