antd-vue中，点击table行高亮效果实现，自定义hover行时的背景颜色

超、凢脫俗 2022-11-05 00:39 717阅读 0赞

## 可以延伸设置：默认第一行高亮 ##

tableCurrRowId默认赋值为第一行id的值

## 效果图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]

## 参考博客：[原博地址][Link 1] ##

## 实现方法： ##

<a-table :loading="tableLoading" :columns="columns" :data-source="tableData" 数据源 rowKey="id" :rowClassName="rowClassName" :customRow="customRow" bordered>
                    </a-table>

data:
    
    	tableCurrRowId:'',//当前选中table行的id
    	columns:[
    	  { 
    	    title: '序号',
    	    scopedSlots: {  customRender: 'num' }
    	  },
    	  { 
    	    title: '标签名称',
    	    dataIndex: 'name',
    	    key: 'name'
    	  },
    	  { 
    	    title: '',
    	    key: 'action',
    	    scopedSlots: {  customRender: 'action' }
    	  }
    	],
    	tableData = [
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2872)', id: '1' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '2' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '3' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '4' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '5' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '6' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '7' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '8' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '9' },
              {  name: '1_MBBG1064_CG125D左盖(季风款_XINGE_2873)', id: '10' }
            ]

methods:
    
    	customRow (record, index) { 
          return { 
            on: { 
              click: () => { 
                this.tableCurrRowId = record.id
                console.log('点击了table行，id为-----', this.tableCurrRowId)
              }
            }
          }
        },
        rowClassName (record, index) { 
          // return 'white'
          return (record.id === this.tableCurrRowId) ? 'blue' : 'white'
        }

/deep/.ant-table-tbody .white{ 
        background-color: white !important;
      }
      /deep/.ant-table-tbody .blue{ 
        background-color: #bae7ff !important;
      }
      /deep/.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td { 
      //自定义table行hover上去的背景颜色
        background: #bae7ff;
        cursor: default;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221023/875cba4cebc74996920e94a47a4ed77b.png
[Link 1]: https://www.cnblogs.com/jardeng/p/13461363.html