ant 组件点击行添加样式

最新推荐文章于 2024-03-22 16:48:06 发布

一头小绵羊

最新推荐文章于 2024-03-22 16:48:06 发布

阅读量800

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/rojie0/article/details/121396727

版权

前端专栏收录该内容

46 篇文章 1 订阅

订阅专栏

ant 组件点击行添加样式

html 代码

 <a-table :data-source="data" bordered :customRow="clickRow" rowKey="id" :pagination="false" class="table">
    <a-table-column key="id" title="分类名称" data-index="categoryNameCn" />
</a-table>

JS代码

 clickRow (record, index) {
      return {
        on: {
          // 鼠标单击行
          click: event => {
            console.log('record',record);
            event.currentTarget.parentNode.querySelectorAll('tr').forEach(item => {
              item.style.background = 'white'
              item.style.color = 'black'
              item.style.fontSize = '12px'
            })
            event.currentTarget.style.background = '#e6f7ff'
            event.currentTarget.style.color = '#40a9ff'
            event.currentTarget.style.fontSize = '14px' 
          }
        }
      }
    },