element-ui 表格翻页多选,数据回显
reserve-selection与row-key结合


<el-table :data="pageData" ref="goodsTable" size="small" v-loading="loading" height="520" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true" width="50" prop="id">
</el-table-column>
<el-table-column label="编号" prop="goodsCode" width="130">
</el-table-column>
<el-table-column label="品名" prop="tradeName" show-overflow-tooltip>
</el-table-column>
<el-table-column label="规格" prop="specification" width="150" show-overflow-tooltip>
</el-table-column>
<el-table-column label="最小包装" prop="minPack" width="150" show-overflow-tooltip>
</el-table-column>
<el-table-column label="状态" prop="saleState" width="100">
<template scope="scope">
<el-tag>{{scope.row.saleState | statusFilter}}</el-tag>
</template>
</el-table-column>
<el-table-column label="生产厂家" prop="manufacturer" show-overflow-tooltip>
</el-table-column>
</el-table>
data() {
pageData: [],
loading: false,
// 获取row的key值
getRowKeys(row) {
return row.id;
},
selectedData: []
},
推荐网址:https://segmentfault.com/q/1010000009772656
http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
element-ui 表格翻页多选,数据回显的更多相关文章
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- element ui 渲染超过上百条数据时页面卡顿,更流畅的加载大量数据
问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度
- Struts2【UI标签、数据回显、资源国际化】
Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签...也就是显示页面的标签..... 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再 ...
- Struts2第十一篇【简单UI标签、数据回显】
Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...
- 一脸懵逼学习Struts数据校验以及数据回显,模型驱动,防止表单重复提交的应用。
1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...
- 二十 Struts2的标签库,数据回显(基于值栈)
通用标签库 判断标签:<s:if>.<s:elseif>.<s:else> 循环标签:<s:iterator> 其他常用标签: <s:proper ...
- SpringMVC(三) —— 参数绑定和数据回显
参数绑定的过程:就是页面向后台传递参数,后台接受的一个过程. 默认支持的参数类型:(就是你在方法上以形参的形式去定义一下的类型,就可以直接使用它) HttpServletRequest HttpSer ...
随机推荐
- ECharts配置项之title(标题)
1.标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' } 2.主副标题之间的间距 title:{ //默认为10 itemGa ...
- Java常见异常:Exception in thread "main" java.lang.NoClassDefFoundError
在某一路径下执行编译好的class文件出错. 异常如下: E:\liwy>java Test98 Exception in thread "main" java.lang.N ...
- 查看iis对应w3wp.exe显示的进程ID号
1.任务管理器,查看,选择列,选择PID(进程标识符) 2.通过cmd查询: 管理员身份运行cmd,跳转到C:\Windows\System32\inetsrv目录,然后运行appcmd list w ...
- Redux 管理React Native数据
现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store ...
- hdu 6134 Battlestation Operational 莫比乌斯反演
Battlestation Operational Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- pom中配置的仓库无效的问题
今天在用spring cloud的时候发现,配置的pom仓库一直无效(官网要求2.0版本直接从指定仓库里下).于是上网搜索,发现(http://18810098265.iteye.com/blog/2 ...
- hrbust 2080链表 【贪心】
仔细看题想想就是个贪心题,两个sort就可以解决了 #include<stdio.h> #include<string.h> #include<math.h> #i ...
- => js 中箭头函数使用总结
箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...
- linux c/c++ 文件是否存在
linux c/c++ 文件是否存在 #include <unistd.h> int FileExist(const char* fname) { return access(fname, ...
- Spring Cloud 入门教程(二): 配置管理
使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spring ...