Vue利用slice()方法实现分页操作

古城微笑少年丶 2023-09-26 18:10 139阅读 0赞

## 系列文章目录 ##

`提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加`  
例如：第一章 Python 机器学习入门之pandas的使用

--------------------

`提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档`

#### 文章目录 ####

*  系列文章目录
 *  一、1. 思路 ： 使用 slice()方法进行分页？
 *  二、使用步骤
 *   *  1.表格区域
     *  2.JS模块代码
 *  总结

--------------------

## 一、1. 思路 ： 使用 slice()方法进行分页？ ##

1-1. 拿到要分页的表格数据过后，获取到表格数据的长度，将表格数据的长度设置 为分页器里面的总条目数

this.total = this.pdDataList.length;

1-2. 让后在 分页器里面的 total 属性上进行绑定  
1-3. 在 Vue 中的 data 里面设置 当前页和 当前条数: 即(currentPage 和 pagesize)

1-4. element-ui 中分页器为我们提供了两个事件:  
size-change : 每页条数 改变时触发  
current-change ：当前页 改变时触发  
1-5. 在 size-change 事件里面 将 data 中定义的 pagesize 的值进行改变  
handleSizeChange(pageSize)\{  
// pageSize 是当前选中的条数  
this.pagesize = pageSize;  
\},  
1-6. 在 current-change 事件里面将 data 中定义的 currentPage 的值进行改变  
// 当前页改变时触发  
handleCurrentChange(pageNum)\{  
// pageNum 是当前点击的页码  
this.currentPage = pageNum;  
\}  
1-7. 然后在 表格数据绑定的时候利用 数组的 slice() 方法进行分页  
:data=“pdDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)”

## 二、使用步骤 ##

### 1.表格区域 ###

> 代码如下（示例）：

<el-table :data="pdDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border>
            <el-table-column type="index" align="center" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="PDNO" align="center" label="单号" width="180">
            </el-table-column>
            <el-table-column align="center" label="盘点状态" width="180">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.PDFREQ === 'A'">待盘点</el-tag>
                <el-tag type="warning" v-if="scope.row.PDFREQ === 'B'"
                  >盘点中</el-tag
                >
                <el-tag v-if="scope.row.PDFREQ === 'C'">已提交</el-tag>
                <el-tag type="success" v-if="scope.row.PDFREQ === 'D'"
                  >已结束</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="WARENO" align="center" label="仓码" width="180">
            </el-table-column>
            <el-table-column prop="STORENO" align="center" label="储位">
            </el-table-column>
            <el-table-column prop="MATNO" align="center" label="料号">
            </el-table-column>
            <el-table-column prop="SHOULD_START" align="center" label="开始时间">
            </el-table-column>
            <el-table-column prop="SHOULD_FINISH" align="center" label="截止时间">
            </el-table-column>
            <el-table-column prop="REAL_QTY" align="center" label="实盘">
            </el-table-column>
            <el-table-column prop="SHOULD_QTY" align="center" label="应盘">
            </el-table-column>
          </el-table>
    
          
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage" 
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>

### 2.JS模块代码 ###

代码如下（示例）：

export default {
        
      data() {
        
        return {
        
          // 盘点清单的查询条件
          pdInfo: {
        
            plantno: "MAC1FTH", //工廠DB(必須)
            empno: "F3841014", //登錄工號(必須，不是賬號)
            workDate: "2022-5-14", //任務日期(必須)
            wareno: "", //倉碼
            storeno: "", //儲位
            matno: "", //料號(可模糊)
            pdstate: "", //盤點單狀態
          },
          stateList: [], // 盘点状态
          pdDataList: [], // 盘点清单数据
          total:0,      // 总条数
          currentPage:1,    // 当前页
          pagesize:5,       // 每页显示条目个数
        };
      },
    
      mounted() {
        },
      created() {
        
        this.getTime();
        this.getPdState();
        console.log("获取state", this.$store.state);
      },
      //   计算属性
      computed: {
        
        empno() {
        
          return this.$store.state.user.userid;
        },
        plantno() {
        
          return this.$store.state.user.plantno;
        },
      },
      methods: {
        
        // 获取当前时间所在日期
        async getTime() {
        
          const res = await workTime();
          this.pdInfo.workDate = res.data.data.date;
          // 在日其查询完毕后，发送盘点清单的请求
          this.getPdList();
        },
    
        // 获取盘点清单
        async getPdList() {
        
          console.log("盘点信息", this.pdInfo);
          const res = await pdList(this.pdInfo);
          console.log("获取盘点清单", res);
          if (res.data.state !== 0)
            return this.$message.error("获取数据失败,请重新在试");
          this.pdDataList = res.data.data;
          this.total = this.pdDataList.length;
          return this.$message.success(res.data.desc);
        },
    
        // 获取盘点状态
        async getPdState() {
        
          const res = await pdState();
          console.log("获取状态", res);
          this.stateList = res.data.data;
        },
    
        // 每页条数改变时触发
        handleSizeChange(pageSize){
        
            console.log('条数',pageSize);
            this.pagesize = pageSize;           // 在 每次 每页条数触发的时候，将选择中的值 赋值给 data 里面定义的 页显示条目个数
        },
    
        // 当前页改变时触发
        handleCurrentChange(pageNum){
        
            console.log('当前页改变时触发',pageNum);
            this.currentPage = pageNum;     // 在每次当前页改变后的值 赋值给 data 里面定义的 当前页
        }
      },
    };

--------------------

## 总结 ##

`提示：这里对文章进行总结：`

例如：以上就是Vue利用slice()方法实现分页操作