精华内容
下载资源
问答
  • elementui分页功能
    2021-08-18 15:28:14

    1:data数据

     // table数据,用于赋值于后台数据接口
    tableData: [],
    // 页码,页数,时间。可以添加字段用于绑定筛选或者查询
    listQuery: { 
      date:'',
      page: 1,
      pageSize: 10,
    },
    // 数据条数
    total:0
    

    2:html

    表格标签数据,绑定展示的内容,并做处理
    <el-table :data="tableData" class="table">
    	  <el-table-column type="index" label="序号" width="180"> </el-table-column>
          <el-table-column prop="date" label="日期" width="180"> </el-table-column>
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    
    分页标签,
    <div class="block pagination-container footer">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
    </div>
    

    3:方法

    此方法为分页标签绑定的 当前页面的方法
    
    // 更改每页数据条数
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.page= 1
      // 这里的方法是切换每页数据条数或者切换页码后对table数据的更新
      
      // 方法里面是赋值给tableData的后台接口数据
      this.feachData();
      
    },
    // 切换页码
    handleCurrentChange(val) {
      this.listQuery.page= val;
      // 这里的方法是切换每页数据条数或者切换页码后对table数据的更新
      
      // 方法里面是赋值给tableData的后台接口数据
      this.feachData();
      
    }
    

    效果就实现了

    更多相关内容
  • ElementUI分页功能

    2022-08-26 20:06:41
    使用ElementUI实现分页显示数据

    效果图

    在这里插入图片描述

    前端:

    <template>
      <div>
        <h2>用户列表</h2>
        <el-table style="width: 100%" stripe border highlight-current-row :data="userList" >
          <el-table-column align="center" prop="id"   label="员工编号" ></el-table-column>
          <el-table-column align="center" prop="name" label="员工姓名"></el-table-column>
          <el-table-column align="center" prop="sex"  label="员工性别"></el-table-column>
          <el-table-column align="center" prop="age"  label="员工年龄"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>  <!--scope.row当前行的对象-->
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   当数据只有一页时,自动隐藏分页菜单
            @size-change="handleSizeChange"        当每页显示的数据数目发生改变生的动作,需要按新的pageSize查询数据
            @current-change="handleCurrentChange"  当改变当前页时产生的动作
            :current-page="pageNo"                 绑定当前页
            :page-sizes="[5, 10, 30, 50]"          显示pageSize的选项
            :page-size="pageSize"				  绑定当前页数
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">				  绑定当前总数
          </el-pagination>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "userList",
      data(){
        return{
          userList:[],
          pageNo:1,      // 默认当前是第一页
          pageSize:5,    // 当前每页的数据是5条
          totalCount:0   // 总数默认为0
        }
      },
      mounted() {        // 页面加载之前执行的函数
        this.getCount();  // 获取当前数据的总数
        this.getList();   // 按当前的页号和每页的数据量进行查询
      },
      methods:{
        getCount(){       
          this.axios.post("/getCount").then(res=>{
            this.totalCount = res.data;
          })
        },
        getList(){
          let params = new FormData();
          params.append("pageNo",this.pageNo);
          params.append("pageSize",this.pageSize);
          this.axios.post("/getUserList",params).then(res=>{
            this.userList = res.data;
          })
        },
        handleEdit(row){    // 对该行数据进行更新
          this.$router.push({
            name:'update',
            params:{user:row}
          })
        },
        handleDelete(row){ // 对改行数据进行删除
          let params = new FormData();
          params.append("id",row.id);
          this.axios.post("/delete",params).then(res=>{
            if(res.data=="ok"){
              this.$notify.success({"title":"删除结果","message":"成功"});
              this.getCount();
              this.getList();
            }else {
              this.$notify.error({"title":"删除结果","message":"失败"});
            }
          })
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
          this.pageSize = val;  // 修改页的大小
          this.getList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
          this.pageNo = val;       // 更新当前的页
          this.getList();          // 按新的pageNo和pageSize进行查询
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    后端

    @RestController
    public class TestController {
        @Autowired
        UserServiceImpl userService;
        
        @RequestMapping("/getCount")
        public String getCount(){
            return Integer.toString(userService.getCount());
        }
        @RequestMapping("/getUserList")
        public List<User> getUserList(String pageNo,String pageSize){
            return userService.getUserList(Integer.parseInt(pageNo),Integer.parseInt(pageSize));
        }
        
        @RequestMapping("/getUserByID")
        public User getUserByID(String id){
            return userService.getUserByID(Integer.parseInt(id));
        }
        
        
        @RequestMapping("/delete")
        public String delete(String id){
            int result = userService.delete(Integer.parseInt(id));
            return result>0?"ok":"no";
        }
    }
    

    dao层、service层不再描述…

    展开全文
  • vue+elementui 分页功能

    2022-07-12 17:47:53
    效果 使用<el-pagination>el-pagination>组件 size-change和current-change事件来处理页码大小和当前页变动时候触发的事件 page-sizes接受一个整型数组 样式 //完整功能 <div class="pageStyle"> , sizes, prev, ...

    效果

    在这里插入图片描述

    使用<el-pagination></el-pagination>组件
    size-change和current-change事件来处理页码大小和当前页变动时候触发的事件
    page-sizes接受一个整型数组
    

    样式

    //完整功能
      <div class="pageStyle">
        <el-pagination
          style="float: right"
          background
          @size-change="handleSizeChange"
          :current-page="searchForm.pageNum"
          :total="total"
          :page-sizes="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    
      data() {
        return {
          pageSize: [10, 20, 30], // 每页数量
          pageNum: 1, // 页码
          // 搜索条件
          searchForm: {
            supplierName: "",
            registeredAddress: "",
            agreementRegionGuid: null,
            pageNum: 1, // 页码
            pageSize: 10, // 每页数量
          },
       }
    }
    

    方法

    methods: {
    	handleSizeChange(val) {
    	  this.searchForm.pageNum = 1;
    	  this.searchForm.pageSize = val
    	  this.getList()
    	},
    	handleCurrentPageChange(val) {
    	  this.searchForm.pageNum = val;
    	  this.getList()
    	},
    }
    
    // 查询数据列表的方法
    getList() {
      this.tableLoading = true;
      getSupplierUserList(this.searchForm).then((res) => {
        this.tableLoading = false;
        if (verifyResIsSuccess(res)) {
          this.tableData = res.data.data || [];
          this.total = res.data.total;
        }
      })
    },
    
    展开全文
  • elementui分页功能的实现

    千次阅读 2022-06-19 14:32:18
    1、使用elementui组件里的分页样式pafgeinfo.pages指的是分页总数goto这里放的是你的查询数据的方法每次点击则把当前点击的页面参数传过去重新查询方法这里vue3的使用ajax调取后台接口数据需要jquery需使用npm下载...

    1.首先先在methods中去定义一个查询数据的方法先把数据拿过来

            具体实现如下:

    这里我用到了ajax,需要使用npm下载jquery并引入,下载命令可在csdn查

    2、拷贝elementui官网里的分页样式

    <el-pagination background layout="prev, pager, next" :total="pageInfo.pages"

    @current-change="goto"></el-pagination>

    pafgeinfo.pages指的是分页总数

    goto这里放的是你的查询数据的方法每次点击则把当前点击的页面参数传过去重新查询方法

    这里vue3的使用ajax调取后台接口数据需要jquery

    需使用npm下载jquery后在当前组件使用import $ from 'jquery'引入

    在data中定义pageinfo:'',获得接口集合使用this.pageinfo来接受分页

    在定义一个数组users来接受分页pageinfo里的list集合数据

    (注意在elementui中不需要循环,使用:data:"接受集合的数组(users)")

    显示对象则使用prop:‘集合里的对象名称’

    展开全文
  • vue+elementui分页功能

    2020-12-01 10:58:21
    重点在于分页组件的@current-change="触发事件函数" 布局文件: <!--表格--> <div> <el-table :data="result" border style="width: 100%">
  • 1.通过handleSizeChange函数监听当前页展示的数据条数是多少,...3.把监听到的数据传给querInfo,然后向服务器发送请求,返回querInfo中请求的params,然后在分页区中把current-page,page-size都绑定querInfo中相对应.
  • vue+elementui实现分页功能模板
  • ElementUI 分页

    2021-01-26 13:37:00
    一、概述 ...本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination分页,使用Pagination 快速完成分页功能 最终效果 二、完整代码 test....
  • 情景浮现:后端没有给分页,一股脑全把数据给前端,比如请求过来有1941条信息,那么我们就应该在页面显示有多少页数据,多少条。 以下为个人写的方法,可能方法有点蠢,不影响功能的实现,如有错误或其他更优写法,...
  • elementUI实现分页功能

    2021-01-21 15:14:58
    <template> <div id="app"> <el-table :data="tableData.slice((currentPage-1)*size,currentPage*size)"> ...el-table-column prop="date" label="日期">...span class="demon
  • elementUI列表分页
  • 主要在于两个方法的应用:handleSizeChange和handleCurrentChange ... //重新调用分页的方法 }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.pageNum = val; //当前页数 this.getList(); }
  • ElementUI分页实现

    2021-12-08 16:10:36
    1.分页组件 <!-- 分页组件 --> <div class="pageturn"> <el-pagination background @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="pageform.pageNum" ...
  • vue +elementUI 分页功能入的坑。

    千次阅读 2020-04-01 00:23:03
    vue +elementUI 分页功能入的坑(数据不能渲染上表格)注意坑来了!!! 今天写Vue项目遇到表格分页问题,于是就想到elementUI组件有分页功能。 <div class="block"> <span class="demonstration">完整...
  • elementUI实现分页

    千次阅读 2021-01-13 13:13:49
    分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,...
  • 主要为大家详细介绍了vue+elementUI组件table实现前端分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,583
精华内容 1,033
关键字:

elementui分页功能