ElementUI Table组件,如何在多页数据下勾选多行

ElementUI Table组件,选择多行数据时使用 Checkbox。如下图:

但是业务中,表格数据往往不只一页。多页数据情况下,表格勾选某些行,就会遇到返回上一页,勾选消失的情况。这种情况,需要一些技巧和处理。具体代码如下:

<template>
  <div class="demo-example">
    <el-table
      ref="table"
      v-loading="loading"
      :data="list"
      height="650"
      border
      @select="onSelect"
      @select-all="onSelectAll"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="u_createTime" label="注册时间"></el-table-column>
      <el-table-column prop="u_id" label="用户ID"></el-table-column>
      <el-table-column prop="u_nickname" label="用户名称"></el-table-column>
      <el-table-column prop="u_phone" label="用户账户"></el-table-column>
      <el-table-column prop="u_gender" label="性别"></el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span>{{scope.row.u_role === 1 ? '团队长' : '保险人'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="u_companyNum" label="所属企业数量"></el-table-column>
      <el-table-column prop="ha_addPeople" label="所属群组">
        <template slot-scope="scope">
          <el-button @click="onChakan(scope.row)" type="text" style="color:#67c23a" size="small">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="u_lastLoginTime" label="最近登录时间"></el-table-column>
    </el-table>

    <div class="block pag" v-if="total">
      <el-pagination
        @current-change="onChangePage"
        :current-page="currentPage"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      selections: {}, // 保存已选择过的row
      list: [],
      total: 0,
      curPage: 1,
    };
  },

  //方法事件
  methods: {
    // 勾选时候,记录[{u_id: row}, ...]
    onSelect(selection, row) {
      if (this.selections[row.u_id]) {
        delete this.selections[row.u_id];
      } else {
        this.selections[row.u_id] = row;
      }
    },

    // 全选情况
    onSelectAll(selection) {
        // 全选
        if (selection.length) {
            selection.forEach(row => {
                this.selections[row.u_id] = row;
            })
        } else {
            // 取消全选
            this.list.forEach(row => {
                delete this.selections[row.u_id];
            })
        }

    },

    // 对已选择过的row勾选,返回到上一页时候
    checkRows() {
      const keys = Object.keys(this.selections);
      const rows = this.list.filter(row => {
        return keys.includes(String(row.u_id));
      });

      rows.map(row => {
        this.$refs.table.toggleRowSelection(row);
      });
    },

    // 省略...

    // 获取数据列表
    getData() {
      // ...
    },

  },

  created() {
    this.getData();
  }
};
</script>

现在分页切换,勾选依然会显示,对应每页勾选过的行数据。需要提交的勾选数据,也都在this.selections对象中。

原文链接:segmentfault.com

上一篇:Vue面试题收集
下一篇:vue+高德地图开发采坑持续记录

相关推荐

  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(https://npm.taobao.org/mirrors/node/v10.16.0/nodev10.16....

    10 个月前
  • 防止contenteditable加入<DIV>进入铬

    iConnor(https://stackoverflow.com/users/1907358/iconnor)提出了一个问题:Prevent contenteditable adding on E...

    2 年前
  • 配置electron中puppeteer executablePath的正确姿势

    TL; NR 轻量, remote调用(使用本地chrome) = 将chromium整合进安装包(需要asar打包时排除chromium), macOS下验证失败 = 这个问题在...

    1 年前
  • 通过SortableJS实现elementUItable拖动效果

    背景 目前elmenetUI的表格是不支持拖动的,但表格行拖动要求往往比较常见。通过引入sortableJS可以方便的让elementUI组件中的table支持拖动效果。

    16 天前
  • 超详细 ElementUI 源码分析 —— Input

    最近在学习 Vue 框架,想深入了解一下组件化开发以及封装组件库的思想,而 ElementUI 作为这方面做的最好的也是最常用的组件库,它的源码一定有很多值得我们去学习的地方,所以去 ElementU...

    2 个月前
  • 读懂immutable-js中的Map数据结构

    本文受深入探究Immutable.js的实现机制(https://juejin.im/post/5b9b30a35188255c6418e67c)这篇文章启发,结合自己对Map源码的解读,谈谈我对im...

    2 年前
  • 详解Immutable及 React 中实践

    有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了。

    2 年前
  • 设置光标位置contenteditable <DIV>

    CommunityGONeale(https://stackoverflow.com/users/1/community)提出了一个问题:Set cursor position on contentE...

    2 年前
  • 记录element ui table表格spanMethod动态合并列

    先放几个表格的图看看 表格一: 预览:https://jsfiddle.net/xmwh/2vh...(https://jsfiddle.net/xmwh/2vhuwofm/) element ui...

    1 年前
  • 记录Vue+elementUi的开发过程,小白一枚

    最近公司在用VueelementUi开发后台管理系统,因为新手,所以好多东西理解的不够透彻,上手野也慢,现在自己给自己做下开发的小记录,方便日后查看和纠错,欢迎大家指正。

    2 年前

官方社区

扫码加入 JavaScript 社区