element-ui中el-table（隔行换色，复选框回显）

1.隔行换色

el-table加上改属性,然后操作该方法

之后在添加颜色

2.复选框回显

a:表格数据不是动态加载的情况下，表格会自动选中之前选中的

b:表格数据是动态获取的，需要根据行来进行回显

原理：拿已经存储好的之前选中的数据去匹配表格中某一行的某一个属性，两个数组对象中可以匹配上，表格便会回显成功。

原文地址：https://www.cnblogs.com/yxkNotes/p/11584656.html

时间： 2024-08-12 03:42:16

element-ui中el-table（隔行换色，复选框回显）的相关文章

08-JS中table隔行换色

JS中table隔行换色 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table id="tab1" border="" cellspacing="" cellpaddi

jQuery实现table隔行换色和鼠标经过变色

一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: $("table tr:nth-child(odd)").css("background-color","#eeeeee

jQuery隔行换色+全选/全部选demo

隔行换色 html代码 <table border="1" cellspacing="" cellpadding="" width="500px"> <tr> <td>测试数据</td> <td>测试数据</td> <td>测试数据</td> <td>测试数据</td> </tr> <tr&

js隔行换色+全选/全部选demo

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <script type="text/ja

关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案

前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决思路: 1.将CheckBox分为两种,一种是表头里的全选框(以下称全选框),一种是列表行里普通的复选框(以下称普通框): 2.将普通框进行单独封装(原因: 1.便于单个普通框自己管理自己的勾选状态,2.当全选框的勾选状态发生变化时,可以通过props将全选框的状态赋给它,从而实现全选的功能): 关

Element ui 中使用table组件实现分页记忆选中

我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了首先定义个data值 data () { return { multipleSelectionAll: [], // 所有选中的数据包含跨页数据 idKey: 'personId' // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下) } } 方法中定义以下: methods : { // 设置选中的方法 setSelectRow() { if (!this.multi

隔行换色

这是在直接在jsp页面中使用java代码<% //每页显示的新闻列表 List<News> newsList=newsService.getPageNewsList(pageIndex,pageSize); int i=0; for(News news:newsList){ i++; } %> <tr<%if(i%2!=0){%>class="admin-list-td-h2<%}%>"> <td><%=ne

Extjs将gird中指定行的复选框勾选

在Extjs中,可以通过 selType添加复选框 Ext.define('ConnGrid', { title:'关联', extend: 'Ext.grid.Panel', xtype: 'checkbox-selection', store: connStore, selType: 'checkboxmodel', //复选框 ....此处省略... } ) var connGrid = Ext.create('ConnGrid'); 如果想要在表格加载数据时自动指定符合某个条件的数据自动

QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化

版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化本文地址:http://techieliang.com/2017/12/729/ 文章目录 1. 介绍 2. 源码 2.1. using_checkbox_item.h 2.2. using_checkbox_item.cpp 3. 说明 1. 介绍复选框有三种形态:全选对勾.全不选