element-ui中el-table组件的行号
场景:
列表的第一列为序号,为保护数据信息,防止恶意爬虫,不能把后端给的id直接显示想到这里;
解决:
通过动态绑定属性 row-class-name 。
templete:
<el-table :data="tableData3" height="550" style="width: 100%;background: transparent" @row-click="device_detail" :row-class-name="rowClassName"><el-table-column prop="id" label="序号" width="180"></el-table-column>
</el-table>
script:
rowClassName({row, rowIndex}) {//把每一行的索引放进row.idrow.id = rowIndex+1;
}
效果:
很多人第一反应想到的是row-click方法,一般情况下row-click方法只能获取该行数据;
用row-class-name给每一行都加上行号index。
element-ui中el-table组件的行号相关推荐
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- 《前端》Element ui 表格(Table)组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子 下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element UI 表格实现 表尾合计行 ——小肉包
element UI 表格实现 表尾合计行 --小肉包 可以根据需要计算任意列的合计,效果图如下 说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- 使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格 上一篇: MongoDB 聚合 下一篇: vue router 路由守卫 登录验证 https://github.com/SheetJS ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板 演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
最新文章
- Keras快速上手:基于Python的深度学习
- 20年研发管理经验谈(三)
- Android微信自动回复功能
- 自定义圆形控件 RoundImageView
- 《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.1.2 架构师的职责
- bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南
- JVM初学之JVM的垃圾回收机制与垃圾回收器
- sklearn学习笔记(一):数据预处理
- 用java网络编程中的TCP方式上传文本文件及出现的小问题
- bzoj 1610: [Usaco2008 Feb]Line连线游戏
- jquery 后代元素_在jQuery中查找元素的所有后代
- debian9 linux的版本,Debian 9.4 发布,小版本更新
- Java加密的几种方式
- 开发竞赛作品展示网站上线!
- python微信语音转发方法_【高逼格技巧系列】如何在微信中转发语音
- java定时器quartz表达式,quartz定时任务cron表达式
- 人工成本上升?设备停机率高?制造企业该如何破而后立?
- 可能你需要一个王者荣耀刷金币神器(解除网瘾)
- oracle定时频率,Oracle 定时任务 — 定时执行存储过程
- 计算机如何删除已连接的打印机驱动程序,怎么删除网上共享的打印机驱动程序...
热门文章
- 修改android预览分辨率,wm命令使用方法(修改android 分辨率)修改
- 9月20日云栖精选夜读:异构计算高性能计算分论坛——揭秘拿什么实现超算平民化、国际化?
- 斗战神单机版正在连接服务器,斗战神登录卡在这里,又不提示登录失败或者连接超时什......
- 积分换元法中换元单调性问题的讨论
- HDU 1335(Basically Speaking)
- .NET应用程序 全局RGB效果(VB.NET示例)
- 微信群打卡小程序_微信打卡小程序上线,你会用吗?
- 堆中存什么?栈中存什么?
- 将iPad作为Windows电脑副屏的几种方法
- python中write什么意思_python file write () 方法概括及作用分析(实例)