zoukankan      html  css  js  c++  java
  • el-table多选框,分页保留上页选中目标

    1、在 el-table中,设置table的唯一标识:row-key="id",在复选框列中,设置 reserve-selection ,设置为 true 时,则点击分页的时候,根据table中的 row-key ,来保留之前选中的数据,

       <!-- 表格控件 -->
        <el-table :data="tableData" style=" 100%" :fit="true" @selection-change="handleSelectionChange" row-key="id" :header-cell-style="{background:'#F0F2F5',color:'#585858',textAlign: 'center',fontSize: '12px'}" > <el-table-column type="selection" align="center" reserve-selection width="55"> </el-table-column> <el-table-column prop="merId" min-width="90" align="center" show-overflow-tooltip label="商户号"> <template slot-scope="scope"> {{scope.row.refId}}({{scope.row.refname}}) </template> </el-table-column> </el-table>
        <!-- 分页控件 --> <div class="pagein_box"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo" :page-sizes="[10, 20, 30 ,40]" layout=" prev, pager, next,sizes, jumper, total" :total="pageInfo.totalNum" :pager-count= "5" > </el-pagination> </div>

    2、

                // 获取当前点击的每页几条
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.getRoleLists();
                },
                // 点击切换分页页码,获取当前点击的是第几页
                handleCurrentChange(val) {
                    this.pageNo = val;
                    this.getRoleLists();
                },
    
  • 相关阅读:
    ubuntu14.04显卡驱动问题(amd5600k集显7650d)
    win7 ubuntu 14.04双系统安装
    func_num_args, func_get_arg, func_get-args 的区别与用法
    wamp2.5版本64位403forbidden问题
    mysql根据汉字拼音排序查询
    php判断浏览器语言
    php批量下载文件
    php搜索分页
    把ZenCart在线商店搭建到本地
    livezilla账号或密码修改方法
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/13897159.html
Copyright © 2011-2022 走看看