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

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

效果图:

在这里插入图片描述

参考博客:原博地址

实现方法:


	  		    <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;
  }
Logo

前往低代码交流专区

更多推荐