// 基于 @CONTROL/表格/CONTROL.scss.ftl 生成 .grid { flex-grow: 1; height: 100%; overflow: auto; .el-table__body-wrapper::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px !important; } .el-table__body-wrapper::-webkit-scrollbar-thumb { /*滚动条颜色*/ border-radius: 10px !important; background-color: #cecece !important; } .el-table__body-wrapper::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; background: #ededed !important; border-radius: 10px !important; } /*表格文字过长省略*/ .el-table th>.cell, .el-table td>.cell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .el-table-column--selection .cell { padding-left: 10px; padding-right: 10px; .el-checkbox { margin-right: 0; } } .app-column-link, .app-format-data { display: inline; } .el-table { height: 100%; border-left: none; // 去除表格右侧边框 &::after { width: 0; } .el-table__row { .grid-uiaction-divider { padding: 0 10px 0 10px; border-left: 1px #b3b3b3 solid; } .grid-first-uiaction { padding: 0 10px 0 10px; } } // 表格头最小高度为45px .el-table__header-wrapper, .el-table__fixed-header-wrapper { min-height: 60px; height: auto; .el-table__header { height: 100%; } } // 表格内容最大高度为100% - 45px .el-table__body-wrapper, .el-table__fixed-body-wrapper { max-height: calc(100% - 60px); .el-table__body { height: 100%; } } // 解决滚动到底时错位问题 .el-table__fixed-body-wrapper .el-table__body { padding-bottom: 10px; // 滚动条宽度 } .quick-toolbar { display: inline-block; button { background: #ebf3fb; color: #2575ca; border: 0; } } .el-tooltip { .ivu-form-item { margin-bottom: unset !important; } } .el-table__body .edit-cell { padding: 0; .app-form-item { margin-top: 20px; margin-bottom: 20px; } } } .grid-pagination { height: 50px; padding: 6px 0px; .page-button { button { padding: 0; font-size: 16px; min-width: 32px; height: 32px; margin-right: 4px; } } .page-column { position: absolute; left: 0; } .batch-toolbar { position: absolute; left: 105px; >.toolbar-container { button { font-size: 16px; min-width: 32px; height: 32px; margin-right: 4px; margin-top: 0; margin-bottom: 0; } } } } } .ivu-modal-content { .footer { .ivu-row { text-align: right; } } } .cell-indeterminate { >div>label { >span { .el-checkbox__inner { background-color: #409eff; border-color: #409eff; } .el-checkbox__inner:before { content: ""; position: absolute; display: block; background-color: #fff; height: 2px; transform: scale(.5); left: 0; right: 0; top: 5px; } } >span.is-checked { .el-checkbox__inner { background-color: #409eff; border-color: #409eff; } .el-checkbox__inner:after { border: 0px; } } } } .cell-select-all { >div>label { >span { .el-checkbox__inner { background-color: #409eff; border-color: #409eff; } .el-checkbox__inner:after { box-sizing: content-box; content: ""; border: 1px solid #fff; border-left: 0; border-top: 0; height: 7px; left: 4px; position: absolute; top: 1px; transform: rotate(45deg) scaleY(1); width: 3px; transition: transform .15s ease-in .05s; transform-origin: center; } } } } // this is scss