大家好！我叫戴向天
QQ群：602504799
如若有不理解的，可加QQ群进行咨询了解
在我前端工作之前，在处理数据的时候，我经常在想如何更好的处理数据，对数据的可空性更高，更好的变换。
其实这个也不是什么技术要点，只是在开发的时候，更加如意，特别在修改的是也方便。
我的思路是，基础数据是不容改变的。然后通过其它的方式来进行获取相对应的数据，或者其它的数据格式。
例如：
const arr = [
{
value: 1,
name: 'a'
},{
value: 2,
name: 'b'
},{
value: 3,
name: 'c'
},{
value: 4,
name: 'd'
}
]
// 现在我只想获取arr里面的数字,
const arrNum = arr.map(item=>{
return item.value
})
// [1,2,3,4]
// 我想获取value加上name的合并字符串
const arrStr = arr.map(item => {
return item.value+ item.name
})
// ["1a", "2b", "3c", "4d"]
上面这两种其实就是最简单的方式，可以说体现的效果并不大。
现在我就假设数据里面有10种数据,并且以每4个分一组
const arrTest = new Array(10)
function getList ( data ) {
const arr = []
const column = 4
const list = data
const len = Math.ceil(list.length / column)
for (let i = 0; i < len; i++) {
arr.push(list.slice(i * column, i * column + column).map((item) => {
return item
}))
}
return arr
}
getList(arrTest)
结果如下：
现在我就来写个简单的数据列表加分页的功能，以及前端本地实时搜索功能的组件
<template>
<div>
<div>
<input v-model="keyWord" />
</div>
<div>
<ul>
<li v-for="(item,key) in getList" :key="key">{
{item}}</li>
</ul>
</div>
<div>
<span @click="changePage(false)">上一页</span>
共 {
{getTotal}} 页
<span @click="changePage(true)">下一页</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], // 后台总数据
pageSize: 10,
page: 1,
keyWord: '',
};
},
methods: {
// 改变page值
changePage(bool) {
if (bool) {
this.page + 1 <= this.getTotal ? this.page++ : this.getTotal;
} else {
this.page > 1 ? this.page-- : 1;
}
},
},
computed: {
// 获取数据
getList(arr) {
// 返回的时候在进行分页处理
const start = (this.page - 1) * this.pageSize;
const end = start + this.pageSize;
return this.getData.slice(start, end);
},
// 数据处理
getData() {
const arr = [];
this.list.forEach((item) => {
// 关键字搜索处理
if (this.keyWord.toString()) {
if (item.toString().indexOf(this.keyWord.toString()) > -1) {
arr.push(item);
}
} else {
arr.push(item);
}
});
return arr;
},
// 获取总页数
getTotal() {
return Math.ceil(this.getData.length / this.pageSize);
},
},
watch: {
// 当关键字有变化的时候，page就进行初始化
keyWord() {
this.page = 1;
},
},
// 创建总数据
mounted() {
const arr2 = new Array(100);
for (let i = 0; i < arr2.length; i++) {
this.list.push(i + 1);
}
},
};
</script>
在上面的代码中，我们可以看到，this.list的数据是没有进行该变的，循环出来的永远是处理后的数据。
虽然当前的list的基础数据很单一，全是数字。如果list是个复杂的数据，你也可以使用getData里面进行处理数据，还是不会对list进行做更改。
扫描二维码关注公众号，回复：
13106496 查看本文章
