antd实现table组件选中单行换样式(比如背景颜色)

 更新时间:2024年03月22日 10:24:07   作者:六卿  
这篇文章主要介绍了antd实现table组件选中单行换样式(比如背景颜色),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

antd中table组件选中单行换样式

项目中有一个需求,点击某一行后,将改行的背景颜色换掉,换成一个比较醒目的颜色。

首先看了看官方,官方还是比较可爱可亲的,都给我们准备好了

onRow 用法

适用于 onRow onHeaderRow onCell onHeaderCell

<Table
  onRow={record => {
    return {
      onClick: event => {}, // 点击行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

很明显 这个属性对应的是一个回调函数,这个回调函数是有两个参数的

  • 第一个参数是当前行的信息
  • 第二个参数是当前行在table数组中的下标index

我们这俩主要数onClick这个事件,当我们给onRow赋值为一个回调函数之后,回调函数会执行,返回一个对象

{
      onClick: event => {}, // 点击行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},
    }

当我们单击的时候执行onClick;

后面四个分别是鼠标双击、鼠标右键、鼠标移入和鼠标移出;

我们这俩将onClick后面换成自己的自定义事件

上代码:

 <AAATable
         size={'default'}
         columns={columnsThird} //表格的列
         dataSource={dataTableThird} //表格渲染的数据
         title={'INCLUDE列表'} //表格的名字
         onChange={this.onChangeTableThird} //可以固定使用
         total={totalThird}
         pageSize={pageSizeThird}
         current={currentPageThird}
         showTotal={true}
         rowClassName={this.rowClassNameFun}
         onRow={
              (record, index) => {
                  return {
                      onClick: _ => { this.zjq(record, index) }, // 点击行
                          };
              }}
 />

我们在zjq这个函数中能获取到当前点击的行内容和行下标;

    zjq = (rowItem, index) => {
        console.log("LiuQing")
        this.setState({
            index
        })
    }

我们在状态机中存储一下index,用于判断哪个下标显示突出的背景颜色

	state={
		index:""
	}

rowClassName

下面就该说table的另一个属性了行类名rowClassName,这个属性对应的也是一个函数,这个函数的默认两个参数同样是当前行内容和当前行下标,返回值为string也就是我们的类名即可。

我们可以使用index完美的得到哪一行被点击了

rowClassName={this.rowClassNameFun}
    rowClassNameFun = (record, index) => {
        console.log(record, index, "rowClassNameFun")
        if (index === this.state.index)
            return 'mySelfClassName'
    }

最后就是引入样式文件

import './index.less'
	.mySelfClassName{
  	  background-color: red;
	}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue路由拦截及页面跳转的设置方法

    vue路由拦截及页面跳转的设置方法

    这篇文章主要介绍了vue路由拦截及页面跳转的设置方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue弹窗组件的实现方法

    Vue弹窗组件的实现方法

    这篇文章主要为大家详细介绍了Vue弹窗组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Vue下拉选择框Select组件使用详解(二)

    Vue下拉选择框Select组件使用详解(二)

    这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒

    Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒

    这篇文章主要介绍了Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • Vue在css中图片路径问题解决的配置方法

    Vue在css中图片路径问题解决的配置方法

    这篇文章主要为大家介绍了Vue在css中图片路径问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 关于SpringBoot与Vue交互跨域问题解决方案

    关于SpringBoot与Vue交互跨域问题解决方案

    最近在利用springboot+vue整合开发一个前后端分离的个人博客网站,所以这一篇总结一下在开发中遇到的一个问题,关于解决在使用vue和springboot在开发前后端分离的项目时,如何解决跨域问题。在这里分别分享两种方法,分别在前端vue中解决和在后台springboot中解决。
    2021-10-10
  • vue element Cascader级联选择器解决最后一级显示空白问题

    vue element Cascader级联选择器解决最后一级显示空白问题

    这篇文章主要介绍了vue element Cascader级联选择器解决最后一级显示空白问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • C#实现将一个字符转换为整数

    C#实现将一个字符转换为整数

    下面小编就为大家分享一篇C#实现将一个字符转换为整数,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 如何在Vue.JS中使用图标组件

    如何在Vue.JS中使用图标组件

    这篇文章主要介绍了如何在Vue.JS中使用图标组件,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • Vue实现简单搜索功能的示例代码

    Vue实现简单搜索功能的示例代码

    在vue项目中,搜索功能是我们经常需要使用的一个场景,最常用的是在列表数据中搜索一个想要的,今天的例子就是我们实现vue从列表数据中搜索,希望对大家有所帮助
    2023-03-03

最新评论