后端未做分页，前端进行分页（采用element.ui pagination组件，vue框架）_后端没有给分页前端获取length分页不生效

后端未做分页，前端进行分页（采用element.ui pagination组件，vue框架）

1.data中定义私有数据，进行数据的接收和设定。

  data() {
    return {
        // 权限列表
        rightsList: [],//后台返回的所有结果
        currentPage: 1, //当前页
        pageSize: 20, //当前页容量
        total: null, //总数
    }
  },
1
2
3
4
5
6
7
8
9

2.定义的方法
getRightsList函数拿到发起请求数据，进行数据的接收

  methods: {
    // 获取权限列表
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      if (res.meta.status !== 200) {
        return this.$message.error("获取权限列表失败！")
      }
       this.rightsList = res.data
       this.total = res.data.length;//总条数
      //  console.log(this.rightsList);
      },
      handleSizeChange(val) {//切换每页条数容量
     console.log('每页：${val}条');
      this.pageSize = val;
      this.getRightsList();
    },
    handleCurrentChange(val) {//切换当前页
      console.log('当前：页${val}条');
      this.currentPage = val;
      this.getRightsList();
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.分页区代码设置

     <!-- 分页区域 -->
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,20,30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
1
2
3
4
5
6
7
8
9
10

4.重点 :data=“rightsList.slice((currentPage-1)pageSize,currentPagepageSize)”
data接受的是slice（）函数处理后的对象

   <!-- 卡片视图 -->
    <el-card>
      <el-table :data="rightsList.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="权限名称" prop="authName"></el-table-column>
      <el-table-column label="路径" prop="path"></el-table-column>
      <el-table-column label="权限等级" prop="level">
      <template slot-scope="scope">
          <el-tag v-if="scope.row.level === '0'">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
      </template>
      </el-table-column>
      </el-table>
    </el-card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5.定义和用法
slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。

6.语法
array.slice(start, end)

7.参数Values
参数描述
start 可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

欢迎讨论