Skip to content

Commit

Permalink
优化表格组件,增加表头以及分页吸顶功能
Browse files Browse the repository at this point in the history
  • Loading branch information
chengmingrui committed Feb 11, 2022
1 parent a418d65 commit 6945b28
Show file tree
Hide file tree
Showing 12 changed files with 757 additions and 416 deletions.
261 changes: 110 additions & 151 deletions src/Tabulation.less
Original file line number Diff line number Diff line change
@@ -1,158 +1,117 @@
@import url('../../assets/style/variables');
@import url('../../assets/style/element-style/radio');
@import url('../../assets/style/element-style/checkbox');
@import url('../../assets/style/element-style/button');

.tabulation {
&-more {
height: 50px;

&-load {
background-color: @color-bg;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #999;

&-img {
width: 20px;
height: 20px;
}
}
}

&-no-more {
background-color: @color-bg;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #999;
}

.el-table {
border: 1px solid #E9EDF5;
border-radius: 8px;
overflow: hidden;

.el-table__header {
th {
&.el-table__cell {
background: #F3F6FD;
}

/* 表格表头左侧样式 */
&:first-child {
.cell {
padding-left: 28px;
}
}
}
}

.el-table__body {
.el-table__row--striped {
td {
&.el-table__cell {
background-color: @table-striped_background;
}
}
}


tr {

&.hover-row,
& {
&.el-table__row {
&:hover {
td {
&.el-table__cell {
background-color: @table-hover-background;
}
}
}
}
}
}

/* 表格内容左侧样式 */
.el-table__row {
td {
&:first-child {
.cell {
padding-left: 28px;
}
}
}
}
}

/* 表格多选框 */
.el-checkbox {
font-size: 16px;

.is-indeterminate {
.el-checkbox__inner {
&::before {
top: 6px;
}
}
}

.el-checkbox__inner {
width: 16px;
height: 16px;

&::after {
left: 5px;
top: 2px;
}
}
}

/* 表格单选框 */
.el-radio {
.el-radio__input {
&.is-checked {

.el-radio__inner {
border: 1px solid @color-purple;
background-color: #fff;

&::after {
background-color: @color-purple;
width: 8px;
height: 8px;
}
}
}

.el-radio__inner {
width: 16px;
height: 16px;
}
}

input {
width: 100%;
height: 100%;
}
}

.el-button--text {
padding: 0;
margin-left:0;
}
}

&-pagination{
padding: 10px;
text-align: right;
}
width: 100%;

&-more {
height: 50px;

&-load {
background-color: @color-bg;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #999;

&-img {
width: 20px;
height: 20px;
}
}
}

&-no-more {
background-color: @color-bg;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
color: #999;
}

.el-table {
border: 1px solid #E9EDF5;
border-radius: 8px;
// overflow: hidden;

.el-table__header {
th {
&.el-table__cell {
background: #F3F6FD;
}

/* 表格表头左侧样式 */
&:first-child {
.cell {
padding-left: 28px;
}
}
}
}

// 表格固定某一行某一列的时候的样式
.el-table__body,
.el-table__fixed,
.el-table__fixed-right,
.el-table__fixed-left {
.el-table__row--striped {
td {
&.el-table__cell {
background-color: @table-striped_background;
}
}
}

tr {
&.hover-row {
&.el-table__row {
td {
&.el-table__cell {
background-color: @table-hover-background;
}
}
}
}
}

/* 表格内容左侧样式 */
.el-table__row {
td {
&:first-child {
.cell {
padding-left: 28px;
}
}
}
}
}

.el-button {
&--text {
margin: 0;
padding: 0;
}
}
}

&-pagination {
padding: 10px;
text-align: right;
}

.tabeleHeaderStick {
position: fixed;
z-index: 9999;
}
}

// 页面loading展示
.el-loading-spinner {
.el-icon-loading {
font-size: 32px;
}
}
.el-icon-loading {
font-size: 32px;
}
}
Loading

0 comments on commit 6945b28

Please sign in to comment.