vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择
一、vue+elementUI实现 分页表格前的多选
多选效果图:
代码如下:
<el-table
ref="multipleTable"
:data="listData"
tooltip-effect="dark"
:default-sort="{ prop: 'date', order: 'descending' }"
:stripe="true"
:max-height="TABLEHEIGHT"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="55"></el-table-column>
<el-table-column label="ID" prop="id" align="left" width="80"></el-table-column> <div class="city-list-body-pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
style="height:40px;city-height:40px;"
></el-pagination>
</div> export default class carAcct extends Vue {
private multipleSelection: any = []
private listData: any = []
private currentPage = 1
private total = 0
private pageSize = 20
private TABLEHEIGHT = document.documentElement.clientHeight - 272 private handleSizeChange (e: any) {
this.pageSize = e
this.listPage()
}
private handleCurrentChange (e: any) {
this.currentPage = e
this.listPage()
}
private handleSelectionChange (val: any) {
this.multipleSelection = val
}
}
一、vue+elementUI实现 分页表格前的单选
单选效果图:
主要是使用elementUI提供的table中的toggleRowSelection(row, selected)方法,
*该方法用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
这和上面的多选差不多完全一样,只是在选择方法 handleSelectionChange中加上判断:
1 if (val.length > 1) {
2 (this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
3 val.splice(0, 1)
4 }
特别说明一下:因为我用的TypeScript,而TypeScript 又是强类型检查,所以 this.$refs.multipleTable 改成了 (this.$refs.multipleTable as any),不然会报以下错误:
如果不是使用的TypeScript,可以直接写成以下格式:
if (val.length > 1) {
this.$refs.multipleTable.toggleRowSelection(val[0], false)
val.splice(0, 1)
}
总代码如下:
<el-table
ref="multipleTable"
:data="listData"
tooltip-effect="dark"
:default-sort="{ prop: 'date', order: 'descending' }"
:stripe="true"
:max-height="TABLEHEIGHT"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" min-width="55"></el-table-column>
<el-table-column label="ID" prop="id" align="left" width="80"></el-table-column> <div class="city-list-body-pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
style="height:40px;city-height:40px;"
></el-pagination>
</div> export default class carAcct extends Vue {
private multipleSelection: any = []
private listData: any = []
private currentPage = 1
private total = 0
private pageSize = 20
private TABLEHEIGHT = document.documentElement.clientHeight - 272 private handleSizeChange (e: any) {
this.pageSize = e
this.listPage()
}
private handleCurrentChange (e: any) {
this.currentPage = e
this.listPage()
}
private handleSelectionChange (val: any) {
if (val.length > 1) {
(this.$refs.multipleTable as any).toggleRowSelection(val[0], false)
val.splice(0, 1)
}
this.multipleSelection = val
}
}
3、禁止部分选择
首先我们实现多选: 手动添加一个el-table-column
,设type
属性为selection
即可;然后设置 selectable 属性来决定该行数据是否选中。
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
:selectable="checkSelectable"
width="55">
</el-table-column>
......
</el-table>
</template>
设置禁止选中的条件:
checkSelectable(row) {
return row.date == '2016-05-03'
},
若返回为 true, 则可以选中,否则禁止选中
vue+elementUI实现 分页表格的单选或者多选、及禁止部分选择的更多相关文章
- vue+element-ui 实现分页(根据el-table内容变换的分页)
官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...
- php一些单选、复选框的默认选择方法(示例)
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- vue elementui点击表格当前行radio单选选中
官方文档:https://element.eleme.cn/#/zh-CN/component/radio 参考:https://www.cnblogs.com/steamed-twisted-rol ...
- vue+Element-ui实现分页效果
当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui ...
- vue element-ui 做分页功能之封装
在 vue 项目中的 components 中 创建一个 文件夹,文件夹里创建一个 name(这个名字你随意取).vue <template> <div class=" ...
- vue+element-ui实现分页
我使用得是el-table+el-pagination来实现的, 话不多说,直接上代码 html代码部分 <!-- table --> <el-table :data="s ...
- vue+element-ui 实现分页
<el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,curr ...
- vue+element-ui:table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...
- ElementUI的Table表格添加自定义头CheckBox多选框
在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...
随机推荐
- Mybatis入门篇之基础CRUD
前言 作为一个资深后端码农天天都要和数据库打交道,最早使用的是 Hiberate,一个封装性极强的持久性框架.自从接触到 Mybatis 就被它的灵活性所折服了,可以自己写 SQL,虽然轻量级,但是麻 ...
- MySQL 数据库中的基础操作
数据库中的表操作 1.创建表 表的表名命名规则: -- 数据库表命名规则重要说明: -- (1)数据库表名称可以支持大写字母A-Z,小写字母a-z,数字0-9,字符包括下划线 _ ,可以组合使用; - ...
- webstorm编写vue、react 将大驼峰组件命名转换成短横杠命名
大家好!我是木瓜太香,精通 webstorm 与常见前端技术的工程师,偶尔也在b站搞一些 webstorm 技巧教学,今天给大家带来的是大驼峰小驼峰快速转换短横杠命名或者下划线命名的方式. 开发中我们 ...
- ASP.NET Core 进程内与进程外的性能对比
ASP.NET Core 进程内与进程外的性能对比 本文内容是<深入去浅出ASP.NET Core>提供的扩展内容,毕竟在书里说进程内外的性能说明对比,对于初学者而言,稍微复杂了点. 我在 ...
- Activiti7 zip部署,查询及其删除
zip部署 package com.itheima.activiti; import org.activiti.engine.ProcessEngine; import org.activiti.en ...
- 同样是logback1.11,更换了log配置后,无论是否有线程持续不断写入log文件,log文件会按设定以日期序号轮换
上次发现了logback1.11的一个bug,即有线程持续写入log,则log文件不会按设定模式进行轮换. 但发现同样采用logback1.11的另外一个工程,它的日志文件就没有错误,于是参照其配置文 ...
- leetcode刷题-50Pow(x, n)
题目 实现 pow(x, n) ,即计算 x 的 n 次幂函数. 思路 最初的想法n>0计算res = res*x 计算n次,n<0,将x取倒数后同理,但结果表明计算速度太慢了. 后续应该 ...
- 面试官问我:看过sharding-jdbc的源码吗?我吧啦吧啦说了一通!!
写在前面 在产品初期快速迭代的过程中,往往为了快速上线而占据市场,在后端开发的过程中往往不会过多的考虑分布式和微服务,往往会将后端服务做成一个单体应用,而数据库也是一样,最初会把所有的业务数据都放到一 ...
- Hadoop入门学习整理(三)
1.Hive 的安装 下载tar包,并且要注意和Hadoop版本兼容. 下载 -----> 传输 -------> 解压 即可. 然后配置环境变量和相关配置信息. 参考: ...
- C#开发PACS医学影像处理系统(十一):Dicom影像挂片协议
通俗点说,挂片协议可以看作整个系统的一个相对复杂一点的配置文件,可以用JSON或XML格式来读取与保存, 另外,可以制作一个独立的exe配置程序来管理这些挂片协议. 假设配置了CT的挂片协议的右键菜单 ...