element-UI 点击一行,背景色变化
代码:

@row-click="rowClick" 当某一行被点击时会触发该事件
:row-class-name="tableRowClassName" 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
:row-style="selectedHighlight" //设置这一行的样式
方法:
tableRowClassName ({row, rowIndex}) {
//把每一行的索引放进row
row.index = rowIndex;
},
selectedHighlight({row, rowIndex}) {
if ((this.getIndex) === rowIndex ) {
return {
"background-color": "#CAE1FF"
};
}
},
rowClick (row) {
this.getIndex=row.index
}
效果:

element-UI 点击一行,背景色变化的更多相关文章
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
随机推荐
- miaosha
1:跨域请求配置 后端Controller 添加注解 @CrossOrigin(origins = {"*"},allowCredentials = "true" ...
- shell变量替换扩展 变量测试
- Grafana的安装配置 和 使用nginx反向代理grafana
grafana安装和配置 grafana安装非常简单:(https://grafana.com/grafana/download) 对于有apt的服务器: # apt install -y softw ...
- 视频专家之路【二】:ffmpeg工具的使用
本文是听了雷宵骅大神的课之后的总结,部分内容借用了其PPT的内容,如有侵权请告知删除. 雷宵骅大神的博客为:https://blog.csdn.net/leixiaohua1020 要学习汽修,那么首 ...
- js取整 - 优雅版(装逼必备)
var a = 2.98; var z1 = ~~a; var z2 = a | 0; var z3 = a>>0; console.log(z1, z2, z3); // 2, ...
- jq随机生成数字加字母的字符串
html代码: <dl class="row"> <dt class="tit"> <label for="title& ...
- shell脚本每五分钟执行一次可执行程序(nohup)
两种解决方案:个人推荐第二种,使用crontab来定时执行任务 1.shell代码如下: nohup command &. 解释: 后台永久运行command命令. (nohup表示后台永 ...
- 云原生数据库崛起,阿里云POLARDB当选世界互联网领先科技成果!
第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光. 刚刚,阿里云自研数据库POLARDB在会上当选世界互联网领先科技成果.POLARDB解决了企业在云时代的数据库难题,帮助企业在数小 ...
- anaconda里的python版本回退, requirements
事情起因:我用的python3.7 , 同事机器学习的部分使用tensorflow,只支持python3.6, 所以我从3.7回退到3.6 conda create -n python36 pytho ...
- vscode 编写Python走过的坑
1,在使用vscode 中import turtle 这个模块, 再调用t = turtle.Pen(),始终提示无法找到turtle模块 2.可是使用terminal 中调用turtle模块,没有问 ...