魔改 elementUI 表格

项目业务需求的时候可以用

• 没有出现滚动条
  

• 有出现滚动条
  

• html

<el-table :data="tableData" height="250" border style="width: 100%">
	<el-table-column align="center" prop="date" label="日期" width="180"></el-table-column>
	<el-table-column align="center" prop="name" label="姓名" width="180"></el-table-column>
	<el-table-column align="center" prop="address" label="地址"></el-table-column>
</el-table>

• date 数据

tableData: [
    {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
    {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
    },
],

• css

温馨提示：以下代码切记要写在<style></style>里面哦！不要加scoped就行了

/* 修改表格头部背景 */
.el-table th {
	background: #23272e !important;
}

/* 修改表格行背景 */
.el-table tr {
	background: #23272e !important;
}

/* 修改斑马线表格的背景 */
/* .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #1f2 !important;
} */

/* 修改行内线的颜色 */
.el-table td,
.building-top .el-table th.is-leaf {
	border-bottom: 2px solid #3f434a !important;
}

/* 修改表格最底部边框颜色和高度 */
.el-table::before {
	border-bottom: 1px solid #3f434a !important;
	height: 2px;
}

/* 修改表头字体颜色 */
.el-table thead {
	color: #fff;
	font-weight: 500;
}

/* 修改表格内容字体颜色和字体大小 */
.el-table {
	color: #fff;
	font-size: 14px;
}

/* 修改表格无数据的时候背景，字体颜色 */
.el-table__empty-block {
	background: #23272e !important;
}
.el-table__empty-text {
	color: #ccc;
}

/* 修改表格无数据的时候背景 */
.el-table {
	background-color: #23272e;
}

/* 修改表格鼠标悬浮hover背景色 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
	background-color: #23262f !important;
}

/* 修改表格头部左侧边框颜色和高度 */
.el-table--border {
	border: 2px solid #3f434a !important;
}

/* 内列右边框 */
.el-table--border .el-table__cell {
	border-right: 2px solid #3f434a !important;
	border-bottom: 2px solid #3f434a !important;
}

/* 表格右侧边插线 */
.el-table--border::after {
	content: "";
	position: absolute;
	background-color: #3f434a;
	z-index: 1;
}

/* 表格底部边插线 */
.el-table::before {
	content: "";
	position: absolute;
	background-color: #3f434a;
	z-index: 1;
}

/* 滚动条的样式 */
::-webkit-scrollbar {
	/* 纵向滚动条的宽度 */
	width: 16px;
	/* 横向滚动条的宽度 */
	/* height: 3px; */
}
/* 滚动滑块的颜色 */
::-webkit-scrollbar-thumb {
	background-color: #717582;
	border-radius: 32px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* 滚动条背景颜色 */
::-webkit-scrollbar-track {
	background-color: #23272e;
	border-radius: 32px;
}