Antd vue2.x a-table 表格自定义样式

根据设计图修改ant design vue的table样式，关键点：

1. 生成内容时使用循环插槽 :slot="item.key"，提前用div包裹文字，用div的border来做hover tr出现的蓝色边框

2.投影部分无法使用 tr 的box-shadow实现，这里采用的是让 td 与其中的 div 产生内边距，再设置当hover时整块底部的 td 为黑到白的渐变色，所以表格两侧会出现切割痕迹

Template

<a-table class="lit-table">
    <div :title="text" :slot="item.key" v-for="item in columns" :key="item.key" slot-scope="text">
      {{ text }}
    </div>
    <div slot="action" slot-scope="text,record" href="javascript:;">
      <a-button type="link" @click="handler(record.id)">link</a-button>
    </div>
</a-table>

Data

const columns = [
  {
    title: '表头1',
    width: 60,
    dataIndex: 'th1',
    key: 'th1',
    ellipsis: true,
    scopedSlots: { customRender: 'th1' }  // 关键句，这里是用来循环的
  },
  {
    title: 'action',
    key: 'operation',
    fixed: 'right',
    width: 60,
    scopedSlots: { customRender: 'action' }  // 固定在右侧的操作
  },

// ...


// tableData 正常写就可以了

CSS【难点】

.lit-table{
    .ant-table table {
        border-collapse: collapse;
    }
	.ant-table-thead>tr>th{
		padding:0;
		border-bottom: 0;
	}
	.ant-table-thead .resize-table-th {
		position: relative;
		padding: 11px 8px 10px;
		font-weight: bold;
		background-color: #fff;
		color: #919EAA;
		//align-items: center;
		display: block;
		&:before{
            display: none;
			content: "";
			position: absolute;
			right: 0;
			height: 20px;
			background: #ccc;
			width: 1px;
			top:50%;
			transform: translate(0,-50%);
		}
	}
    .ant-table-align-center {
        .resize-table-th{
            text-align: center;
        }
    }
	.ant-table-placeholder{
		margin-top: 0;
		border-top: 0;
	}
	.ant-table-tbody > tr > td {
		text-align: left;
	    border-bottom: 0;
        padding: 0;

        &> div {
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 12px;
		    padding: 11px 8px 10px;
            color: #303946;
            background-color: #F7F8FA;
            border: 1px solid #fff;
            border-right: 0;
            border-left: 0;
        }
        &:first-child {
            &>div {
                border-left: 1px solid #fff;
                border-radius: 8px 0 0 8px;
            }
        }
	}
	.ant-table-tbody tr:nth-child(odd),
	.ant-table-tbody tr:nth-child(even) {
	    background-color: #fff;
	}
	.btn-link-bar{
		margin-left:-8px;
	}
	.ant-table-selection-col{
		width: 50px;
	}
    .ant-table-thead > tr > th.ant-table-selection-column .resize-table-th{
        text-align: center;
    }

    .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected), 
    .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected), 
    .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected), 
    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
        > td  {
            background-color: #fff;
            background-image: linear-gradient(to bottom, #fff 30%, #ececec 80%, #fff);

            & > div {
                background-color: #fff;
                border: 1px solid #2194FF;
                border-right: 0;
                border-left: 0;
            }

            &:first-child {
                &>div {
                    border-radius: 8px 0 0 8px;
                    border-left: 1px solid #2194FF;
                }
            }
        }    
    }

    .ant-table-fixed-right .ant-table-tbody > tr {
        > td {
            &:first-child {
                &>div {
                    border-left: 0;
                    border-radius: 0 8px 8px 0;
                }
            }
        }
    }

    .ant-table-fixed-right .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected),
    .ant-table-fixed-right .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) {
        > td  {
            background-color: #fff;
            background-image: linear-gradient(to bottom, #fff 30%, #ececec 80%, #fff);

            & > div {
                background-color: #fff;
                border: 1px solid #2194FF;
                border-right: 0;
                border-left: 0;
            }

            &:first-child {
                &>div {
                    border-radius:  0 8px 8px 0;
                    border-left: 0;
                    border-right: 1px solid #2194FF;
                }
            }
        }  
    }

}