element表格样式自定义
程序员文章站
2022-06-07 18:06:18
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
#app .el-table thead tr{
background: #0e223c;
color: #aeb6c0;
}
#app .el-table th, .el-table tr,.el-table td{
border: 0;
background-color: transparent;
}
#app .el-table__row{
color: #aeb6c0;
}
#app .el-table__row:nth-child(odd){
background: #0e223c;
color: #aeb6c0;
}
#app .el-table__row:nth-child(odd) .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #fff;
border-color: #fff;
}
#app .el-table__row:nth-child(even){
background: #011432;
}
#app .el-table__row:nth-child(even) .el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #147383;
border-color: #147383;
}
#app .el-table--enable-row-hover .el-table__body tr:hover > td {
background: #157283;
color: #fff;
}
#app .el-checkbox__inner {
background-color:#0e223c;
}
#app .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-checkbox__input.is-focus .el-checkbox__inner {
background: #fff;
border-color: #fff;
}
#app .el-checkbox__input .el-checkbox__inner::after {
border: 2px solid #0e223c;
box-sizing: content-box;
content: "";
border-left: 0;
border-top: 0;
height: 7px;
left: 3px;
position: absolute;
top: 1px;
width: 3px;
transform: rotate(45deg) scaleY(1);
}
</style>
</head>
<body>
<div id="app">
<el-table :data="tableData" style="width: 100%" :header-cell-style="getRowClass">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods:{
getRowClass ({ row, column, rowIndex, columnIndex }) {
return 'background: #011432;color: #aeb6c0;';
}
}
})
</script>
</html>
推荐阅读