vue实现换一批业务【WoodenFish完整版】

🚀作者简介

笔名：水香木鱼

主页：水香木鱼的博客

专栏：后台管理系统

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

---

📒技术聊斋

（1）展示层

• getChangeCircle() 【换一批事件】
• newList 【新数组】

 <el-card class="box-card" style="width: 600px">
      <div slot="header" class="clearfix">
        <span>测试数据span>
        
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="getChangeCircle()"
          >换一批el-button
        >
      div>
      
      <div v-for="item in newList" :key="item.id">
        <el-link href="https://element.eleme.io" target="_blank">
          <span>{{ item.name }}span>
          <span>{{ item.time }}span>
        el-link>
      div>
    el-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

（2）核心业务层

 data() {
    return {
      //源数据格式
      sourceList: [],
      newList: [], //处理后的新数据
      timeStart: 0, //截取第几组的起始参数
      timeEnd: 1, //截取第几组的结束参数
      group: 0, //默认为0组
      num: 4, //每页展示列表的数量
      clickNum: 0, //点击的次数
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12

mounted生命周期函数

  mounted() {
    this.interceptingData();
  },
1
2
3

methods生命周期函数

  methods: {
    // 换一批执行事件
    getChangeCircle() {
      if (this.sourceList.length > 4 && this.sourceList.length > this.num) {
        this.sourceListlen(); //点击的时候获取分为几组
        this.autoIncre(); //每点击一次记录点击次数
        this.clear();
        this.interceptingData();
      }
    },
    // 计算数据的长度，共分为几组，如果不能整除则加1
    sourceListlen() {
      var len = this.sourceList.length; //获取源数据的长度
      this.group = len / this.num;
      if (len % this.num != 0) {
        this.group = parseInt(this.group) + 1;
      }
    },
    //计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。
    clear() {
      if (this.clickNum > this.group - 1) {
        this.timeStart = 0;
        this.timeEnd = 1;
        this.clickNum = 0;
      }
    },
    //每点击一次，记录次数
    autoIncre() {
      this.clickNum++;
      this.timeStart++;
      this.timeEnd++;
    },
    //截取当前每组的数据
    interceptingData() {
      //截取源数据放入新数组内
      this.newList = this.sourceList.slice(
        this.num * this.timeStart,
        this.num * this.timeEnd
      );
      console.log(this.newList);
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

（3）完整代码

以下代码 均有注释参考 👇

<template>
  <div>
    <el-card class="box-card" style="width: 600px">
      <div slot="header" class="clearfix">
        <span>测试数据span>
        
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="getChangeCircle()"
          >换一批el-button
        >
      div>
      
      <div v-for="item in newList" :key="item.id">
        <el-link href="https://element.eleme.io" target="_blank">
          <span>{{ item.name }}span>
          <span>{{ item.time }}span>
        el-link>
      div>
    el-card>
  div>
template>
<script>
export default {
  data() {
    return {
      //源数据格式
      sourceList: [
        {
          id: 1,
          name: "vue实现echarts词云图业务【详细配置版】",
          time: "2022-09-15",
        },
        {
          id: 2,
          name: "vue实现刷新页面随机切换背景图【适用于登陆界面】",
          time: "2022-09-11",
        },
        {
          id: 3,
          name: "vue实现浏览器禁止复制、禁用F12、禁用右侧菜单",
          time: "2022-09-10",
        },
        {
          id: 4,
          name: "你不知道的产品体验设计【五层设计模式】",
          time: "2022-08-25",
        },
        {
          id: 5,
          name: "vue封装返回顶部组件【cv可用】",
          time: "2022-08-18",
        },
        {
          id: 6,
          name: "vue实现keep-alive页面缓存【三步骤配置，一步到位】",
          time: "2022-08-11",
        },
        {
          id: 7,
          name: "vue实现搜索、提交等功能【回车事件】",
          time: "2022-08-10",
        },
        {
          id: 8,
          name: "vue实现pdf在线预览业务",
          time: "2022-07-19",
        },
        {
          id: 9,
          name: "UI设计师(界面设计)面试题",
          time: "2022-07-16",
        },
        {
          id: 10,
          name: "前端使用Apache ECharts时，常用的配置项介绍",
          time: "2022-07-10",
        },
      ],
      newList: [], //处理后的新数据
      timeStart: 0, //截取第几组的起始参数
      timeEnd: 1, //截取第几组的结束参数
      group: 0, //默认为0组
      num: 4, //每页展示列表的数量
      clickNum: 0, //点击的次数
    };
  },
  mounted() {
    this.interceptingData();
  },
  methods: {
    // 换一批执行事件
    getChangeCircle() {
      if (this.sourceList.length > 4 && this.sourceList.length > this.num) {
        this.sourceListlen(); //点击的时候获取分为几组
        this.autoIncre(); //每点击一次记录点击次数
        this.clear();
        this.interceptingData();
      }
    },
    // 计算数据的长度，共分为几组，如果不能整除则加1
    sourceListlen() {
      var len = this.sourceList.length; //获取源数据的长度
      this.group = len / this.num;
      if (len % this.num != 0) {
        this.group = parseInt(this.group) + 1;
      }
    },
    //计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。
    clear() {
      if (this.clickNum > this.group - 1) {
        this.timeStart = 0;
        this.timeEnd = 1;
        this.clickNum = 0;
      }
    },
    //每点击一次，记录次数
    autoIncre() {
      this.clickNum++;
      this.timeStart++;
      this.timeEnd++;
    },
    //截取当前每组的数据
    interceptingData() {
      //截取源数据放入新数组内
      this.newList = this.sourceList.slice(
        this.num * this.timeStart,
        this.num * this.timeEnd
      );
      console.log(this.newList);
    },
  },
};
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---

📓精品推荐

🔋vue实现搜索、提交等功能【回车事件】

🔋vue实现pdf在线预览业务

🔋前端element组件库中el-input密码右侧添加小眼睛切换状态

🔋vue实现按钮弹框【弹出图片、视频、表格、表单等】

🔋前端添加水印效果攻略【vue和原生js添加方式】

---

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。