Element Table的row-class-name无效与动态高亮显示选中行背景色


Posted in Javascript onNovember 30, 2018

Element UI 的Table组件踩坑记:

(1)参数row-class-name无效的坑:官方文档给出了如下代码:

Element Table的row-class-name无效与动态高亮显示选中行背景色 

但是我使用后并没有出现预初想要第一行高亮的效果,然后console.log(row, rowIndex),发现控制台输出的值均为undefined。最终解决方案是只要传入row或者rowIndex即可,然后根据自己所要的数据而进行处理,后来我修改代码为如下:

tableRowClassName(row) {
 if (row.number === 1 && this.isActive) {
  return 'first-row'
 } else {
  return ''
 }
}

即可创建实例时已经渲染了第一行数据,其中number是我已经定义的第几行(根据自己获取数据结构自行使用)isActive是我等下要控制实现点击所在行而定义的参数,效果图如下:

Element Table的row-class-name无效与动态高亮显示选中行背景色 

(二)参数highlight-current-row的使用:

<template>
  <el-table :data="imageList" :row-class-name="tableRowClassName" :highlight-current-row="true" row-key="getNumber" @row-click="checkImage" style="width: 100%">
    <el-table-column prop="number" label="搜索结果(按准确度排序)" style="width: 50%"></el-table-column>
    <el-table-column prop="distance" label="误差值" style="width: 50%"></el-table-column>
  </el-table>
</template>

<script>
export default {
methods: {
  checkImage(row, event, column) {
   this.src = row.img
   this.isActive = false
  },
  tableRowClassName(row) {
   if (row.number === 1 && this.isActive) {
    return 'first-row'
   } else {
    return ''
   }
  }
 },
}
</script>

//下面通过修改原插件的样式来显示点击的当前行,注意由于是原插件全局的,所以style不能使用scope属性
<style>
.current-row > td {
 background: #218af3 !important;
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
javascript实现计算器功能
Mar 30 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 #Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 #Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 #Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
JavaScript实现图片放大预览效果
2020/11/02 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
python实现学生信息管理系统源码
2021/02/22 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
环境科学专业研究生求职信
2013/10/02 职场文书
人力资源作业细则
2014/03/03 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers