Vue中使用Element-UI实现表格跨页多选

跨页多选翻页保存问题折磨了我一天,终于找到了合适的解决方法分享一下。

需求:

项目中使用Element-UI:

  • 表格中数据通过网络请求得到;
  • 给后台接口发送页码(pagenum)和每一页条数(pagesize)实现数据分页;
  • 实现单页内全选
  • 翻页保存之前选中的数据

解决方式:

使用官方文档中提供的row-key属性和reserve-selection属性搭配使用

  • 在表格中设置row-key属性,并将该属性设置为当前渲染数据的json中的唯一标识(比如id之类,我的例子里字段名叫bridgecode

在使用 reserve-selection 功能的情况下,该属性必填。

  • 在表格的多选框行中设置reserve-selection属性,当reserve-selection属性为true时,数据更新之后保留之前选中的数据。
<el-table ref="multipleTable" :data="reportList" @selection-change="handleSelectionChange" row-key="bridgecode">
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>

<script>
method:{
    handleSelectionChange(val) {
        //这个val是所有已选中的json的数组
        this.multipleSelection = val;
    },
}
</script>

原文地址:https://www.cnblogs.com/lzb1234/p/11811277.html

时间: 2024-11-06 07:26:44

Vue中使用Element-UI实现表格跨页多选的相关文章

如何在vue项目中引入element ui组件

(1)安装element ui,即: npm i element-ui -S 然后在项目中的node_modules目录下查看是否有element-ui文件夹,如果有说明安装成功了: (2)引入element ui 在main.js中引入element ui,即: 1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI) [注意红色部分,以前是

vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些. 首先我们开始构建一个vue-cli项目 1.首先node环境(这里就不多啰嗦了) 2.执行vue-cli命令 npm install --gl

A在SP.NET跨页多选

在ASP.NET跨页多选 本文介绍怎样在ASP.NET中实现多页面选择的问题.其详细思路非常easy:用隐藏的INPUT记住每次选择的项目,在进行数据绑定时.检查保存的值,再在DataGrid中进行选中显示. 以下时完整的代码和样例: 查看样例 SelectMultiPages.aspx <%@ Page EnableViewState="true" CodeBehind="SelectMultiPages.aspx.cs" Language="c#

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6 在使用axios发送请求时,服务器端设置 res.header("Access-Control-Allow-Origin", "*");可以正确得到结果 当服务器端不设置允许跨域时,使用jsonp方式发送就不行了,提示错误如下 XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Acce

vue中对element的弹框messagebox的二次封装

在vue中对确认框的二次封装 使用场景:在页面中做某些需要警告的操作时的弹框提示 1.在utils文件夹下新建一个confirm.js文件来对messageBox的封装,内容如下: /** confirm.js */ import { MessageBox } from 'element-ui' export function handleCofirm(text = '确定执行此操作吗?', type = 'warning') { return MessageBox.confirm(text,

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

vue中使用Element主题自定义肤色

一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://element.eleme.io/#/zh-CN/component/custom-theme)来安装[主题生成工具]. 三.在 element-variables.scss 文件里修改 $–color-primary:#409EFF,即你想要的主题颜色.然后,执行主题编译命令生成主题(et),根目录会生成一个theme文件夹. 四.封装动态换肤色ThemePicker.vue组件. <template> <

vue中使用element来创建目录列表

之前按照项目需求使用element中的tree来创建目录列表,如今记录一下. 一.项目需求 1.完整展示目录列表 2.右击节点选择重命名,删除,创建文件夹三个选项 3.拖拽文件夹,其中拖拽文件夹有以下要求: a. 如果该文件夹内已存在上传文件,则其他文件夹不能拖拽进入该文件夹内 b.整个目录中有且仅有一个根目录,拖拽文件夹的范围只能在该根目录里面 4.重命名文件夹要求: a.重命名完成后按enter键完成 5.删除文件夹要求: a.如果该文件夹内已含有上传文件,则删除失败 6.创建文件夹要求: