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.js下引入百度地图jsApi的两种方法

    详解vue.js下引入百度地图jsApi的两种方法

    这篇文章主要介绍了详解vue.js下引入百度地图jsApi的两种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue项目实现左滑删除功能(完整代码)

    vue项目实现左滑删除功能(完整代码)

    最近在开发移动端项目,通过向左滑动出现删除按钮,点击即可删除,怎么实现这个功能呢,接下来小编给大家带来实例代码帮助大家学习vue项目实现左滑删除功能,感兴趣的朋友跟随小编一起看看吧
    2021-05-05
  • vuejs2.0运用原生js实现简单拖拽元素功能

    vuejs2.0运用原生js实现简单拖拽元素功能

    这篇文章主要为大家详细介绍了vuejs2.0运用原生js实现简单拖拽元素功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Vue3 Vant组件库使用过程中的避坑点

    Vue3 Vant组件库使用过程中的避坑点

    本片文章主要写了,Vue3开发时运用Vant UI库的一些避坑点。让有问题的小伙伴可以快速了解是为什么。也是给自己做一个记录
    2023-04-04
  • vue-element-admin项目导入和导出的实现

    vue-element-admin项目导入和导出的实现

    组件是Vue.js最强大的功能,这篇文章主要介绍了vue-element-admin项目导入和导出的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    Vue使用Canvas绘制图片、矩形、线条、文字,下载图片

    这篇文章主要介绍了Vue使用Canvas绘制图片、矩形、线条、文字,下载图片的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue表格显示字符串过长的问题及解决

    vue表格显示字符串过长的问题及解决

    这篇文章主要介绍了vue表格显示字符串过长的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VueJs路由跳转——vue-router的使用详解

    VueJs路由跳转——vue-router的使用详解

    本篇文章主要介绍了VueJs路由跳转——vue-router的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Vue实现记住账号密码功能的操作过程

    Vue实现记住账号密码功能的操作过程

    这篇文章主要介绍了Vue实现记住账号密码功能,用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中,下面分享我实现的具体步骤,需要的朋友可以参考下
    2022-07-07
  • vue中使用axios的作用

    vue中使用axios的作用

    Axios是一个功能强大、易用性高的HTTP库,适用于大多数的前端项目,它提供了丰富的功能和灵活的配置选项,可以满足不同项目的需求,这篇文章主要介绍了vue中使用axios的作用,需要的朋友可以参考下
    2023-08-08

最新评论