antd table如何默认选中第一行，并添加背景色
table配置
<Tablecolumns={this.state.columns}dataSource={this.state.tableData}bordered// loadingrowClassName='table-box-detail'pagination={false}// scroll={{y: 500 }}rowClassName={this.setTableRowClassName}// 对点击的列表行添加背景色onRow = {this.onClickTableRow}scroll={{x: 500, y: this.state.scrollHeight }}rowKey={this.state.tableData.ipcId}/>
添加类名的方法
setTableRowClassName = (record) => {return record.iiId === this.state.rowId ? 'clickRowSty1' : '';}
添加点击每一行事件的方法
onClickTableRow = (record) => {console.log(record);return {onClick: () => {this.setState({rowId: record.iiId,selectRow: record})}}}
clickRowSty1 类名 设置样式放在公共样式或者任意一个地方，给个背景色
// 给表格添加背景色
.clickRowSty1 {background-color: #e6f7ff;
}
state设置rowId
this.state = {rowId: ''
}
getList方法 从后台获取列表内容或者自己模拟假数据都行，默认取第一条数据
getList = (data) => {let params = { }window.$API.GetIllegalList(params).then( res => {if(res.data.code === 0) {let pageNav = this.state.pageNav;pageNav.total = res.data.data.total;this.setState({tableData: res.data.data.items,pageNav})// 当获取数据长度不为0，再一条if(res.data.data.items.length !== 0) {this.setState({selectRow: res.data.data.items[0],rowId: res.data.data.items[0].iiId},() => {this.onClickTableRow(res.data.data.items[0]);this.setTableRowClassName(res.data.data.items[0]);});}} else {message.error(res.data.msg);}}).catch( err => {console.log(err);})};
实现效果 默认选中第一条
antd table如何默认选中第一行，并添加背景色相关推荐
- jeecgboot：主表（antd table）默认选中第一条记录
问题描述: 使用jeecgboot框架生成ERP主题的主附表样式,主表默认不选中任何记录,每次需要手动点击一条,下边的附表才能显示对应的查询记录,我们现在要做的是让主表默认选中第一条. 解决思路: 刚 ...
- antd Card组件默认选中
antd Card组件,按照文档,设置了默认值,热更新后,效果正常,完美. 开发过程中,为了防止浏览器有缓存,经常性地会手动点击浏览器的刷新按钮.就是这么一点,让我在设置默认选中上,多停留了几分钟. ...
- bootstrap动态下拉框默认选中及默认选中第一行
正常动态更改只需要在js中设置被选择的option的selected为true即可,如下: <select class="form-control select" id='s ...
- antd table合并行或者列（动态添加合并行、列）
antd table合并行或者列(动态添加合并行.列) 表头只支持列合并,使用 column 里的 colSpan 进行设置. 表格支持行/列合并,使用 render 里的单元格属性 colSpan ...
- html表格选择一行,vue + element table表格如何默认选中第一行
有一个dialog的对话框,我想要在进入对话框的时候默认选中table的第一个 页面dialog部分: :model="zzc" :inline="true" ...
- antd radio设置默认选中_antd中如何给绑定Form的Radio.Group设置默认的选中值！
嗯~~ 本人2年前端小菜鸡,刚刚换了新公司,接手的项目使用的是react+antd+dva+umi等技术. 之前完全没有antd的经验,但是有2年react的经验,所以嘛,项目上手难度一般,但是扛不住 ...
- antd radio设置默认选中_单选框radio总结（获取值、设置默认选中值、样式）
单选框 radio 是 否 1.获取值 $("input[name='killOrder']:checked").val(); $('input:radio:checked').v ...
- antd select 设置默认选中
select 的数据是从后台获取的,用v-model做了绑定,获取数据后给绑定值设置了值,也实现了默认选择,但是却不能再选择了,始终都是设置的那个值,在绑定对象中加了设置初始值后才能正常选择 < ...
- ios UITableView默认选中第一行
NSIndexPath *ip = [NSIndexPath indexPathForRow:0inSection:0]; [titleTableViewselectRowAtIndexPath:ip ...
最新文章
- 对LinqtoExcel的扩展 【数据有限性，逻辑有效性】
- 使用Source Safe for SQL Server解决数据库版本管理问题
- Maven 概要介绍
- A*寻径算法新手入门（转载）
- Vue 安装 less
- 代码设置Shape和Selector
- 亿些模板【数论数学】
- 今天我要批判技术管理者
- i.e., e.g., etc.
- RTLviewer与TechnologyMapViewer的区别？
- 3h精通OpenCV（一）- 读取图像视频与网络摄像头
- 背景图(css sprite)尺寸设置，DIPS，设备像素比，Retina,,border 1px问题
- 网件rax40可以刷梅林_良心曝光网件rax40和华硕ax3000哪个好用？差别大吗？亲测解析内情...
- linux用vi编辑后保存退出命令是什么,linux vi保存退出命令
- LeetCode题解(1872)：石子游戏VIII(Python)
- 诺基亚N95手机使用技巧
- java 生成一个随机整数，范围从 1 到 10；或 生成一个 0 或 1 的随机整数
- sockaddr,sockaddr_in,sockaddr_un结构体详细讲解
- 风扇，html css3,纯CSS3实现的3D风扇动画
- CANape使用记录（一）：CANape新建工程及标定观测