vue iview 单击table行变色获取行数据

用到两个事件：

代码如下：

1 <Table :columns="columns" :data="tableData" @on-row-click="rowClick" :row-class-name="rowClassName" :loading="loading"></Table>

1 data () {

2     return {

3       selectRow: {}

4     }

5   }

 1 methods: {

 2     rowClick (row, index) {

 3       this.selectRow = row //获取行数据

 4     },

 5     rowClassName (row, index) {

 6       if (row.CBDM == this.selectRow.CBDM) { //随便挑个唯一变量比较

 7         return 'aa' //自己的css类名  iview文档table那块有几个现成的样式，建议写进公共样式里

 8       }

 9       return ''

10     }

11 }

1 // 不要添加scoped会导致样式无效

2 <style lange='less'>

3 .aa {

4   color: rgb(250, 195, 100);

5 }

6 </style>

vue iview 单击table行变色获取行数据的更多相关文章

BootstrapTable，选中某几行，获取其数据并进行后台处理。以及其他的属性使用。
参考链接:bootstrap Table API 中文版 Bootstrap Table 选中某几行,获取其数据 Ajax传递数组,struts2接收数组 1.首先将复选框搞出来,<table ...
bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
Gridview 行变色和行按钮调用前端js
1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...
vue+iview实现table和分页及与后台数据交互
最近在项目中遇到使用table分页的功能,所以分享出来给大家希望能够对大家有帮助,话不多说直接上代码 <template> <div> <Table :columns=& ...
jqGrid通过行id获取行对象
$("#jqGrid").jqGrid('getRowData',rowid);
vue获取后端数据放在created还是mounted方法里面？
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行解决方案: 1. 给“统计”这个按钮添加一个点 ...
ReportingService 通过RowNumber函数获取行号和生成隔行变色样式
以前一直没有搞明白SSRS里面的RowNumber函数到底该怎么用,所以一直没有很好的办法在SSRS中的表格上实现隔行变色的样式,实现隔行变色的关键就是获取表格中每一行的行号.在最近了解了下这个函数, ...
LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
原生JS操作 table object HTMLTableSectionElement 对象,获取行数
<tbody id="infoTab"> <tr class="fomat"> <td class="blank&quo ...

随机推荐

在java中String类为什么要设计成final？Java面试常见问题
2023Java面试题最经典的问题之一了,非常经典的Java基础知识,一定要学会! 在Java中,String类被设计成final,这意味着它的值在创建后不可更改.这是因为字符串在Java中使用广泛, ...
java网络编程--4 UDP
java网络编程--4 UDP 1.7.UDP 发短信:不用连接,但是需要知道对方的地址主要包含两个类:DatagramPacket 和 DatagramSocket 发送消息发送端: packa ...
SpringBoot——静态资源及原理
一.使用 SpringBoot 的步骤 [1]创建 SpringBoot应用,选中自己需要的模块.[2]SpringBoot 已经默认将这些场景配置好,只需要在配置文件中指定少量配置就可以运行起来.[ ...
DES算法流程
初始置换IP 表格的使用方法: 将输入的64bit的明文从1开始标号,依次放入到IP初始置换表中数字对应的位置.填充完毕后,按照行优先的顺序从第1行开始依次读取获得输出. 16轮轮结构整体结构因为 ...
案例: 利用 Hugging Face 进行复杂文本分类
Witty 与 Hugging Face 专家加速计划的成功案例如果你对如何更快构建 ML 解决方案感兴趣,请访问专家加速计划登陆页面并通过填写表单联系我们! 业务背景随着 IT 技术不断 ...
高尔顿钉板的统计意义—R实现
提到高尔顿,人们总是把他和钉板实验联系在一起,偶尔也会有人提及他是达尔文的表弟.实际上,作为维多利亚时代的人类学家.统计学家.心理学家和遗传学家,同时又是热带探险家.地理学家.发明家.气象学家,高尔顿 ...
AIArena Frontend 初步练习
尝试对starter项目的页面进行改变修改侧边栏,只留下最上面的「仪表盘」和「列表页」两个大模块 in SideNav.vue the code for the sidebar menu is: & ...
[软件过程/软件生命周期模型]软件过程的工具链&技术链【待续】
0 宣言:DevOps & RUP统一过程建模 1 项目管理 (需求管理 / 缺陷管理 / ...) 禅道(前身:bugfree) [在线协作] JIRA(项目与事务跟踪工具) 与禅道类同,但 ...
[大数据]sqoop安装与运用
1 文由项目使用场景:OLTP Oracle 数据导入到 OLAP HIVE 2 Sqoop简述 Apache Sqoop(TM) 是一款开源的ETL工具,设计用于在 Apache Hadoop和结 ...
Clion+dap仿真器，移植stm32项目
如何将Keil项目移植到Clion,先看几位大佬的文章: 稚晖君的回答:配置CLion用于STM32开发[优雅の嵌入式开发] 野火论坛:DAP仿真器的使用教程 wuxx:nanoDAP使用疑难杂症解析 ...

vue iview 单击table行变色 获取行数据

vue iview 单击table行变色 获取行数据的更多相关文章

随机推荐

热门专题

vue iview 单击table行变色获取行数据

vue iview 单击table行变色获取行数据的更多相关文章