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

2019-05-17 admin

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对象中。

[转载]原文链接:https://segmentfault.com/a/1190000019214423

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65217.html

文章标题:ElementUI Table组件,如何在多页数据下勾选多行

相关文章
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
Bootstrap 下拉多选框插件Bootstrap Multiselect
引入文件: &lt;link rel=&quot;stylesheet&quot; href=&quot;css&#x2F;bootstrap.min.css&quot; type=&quot;text&#x2F;css&quot;&#x2...
2017-02-22
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
回到顶部