vxe-table
Version:
一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...
204 lines (185 loc) • 5.95 kB
CSS
@charset "UTF-8";
/*font*/
/*size*/
/*icon*/
/*color*/
/*input/radio/checkbox*/
/*popup*/
/*table*/
/*filter*/
/*menu*/
/*loading*/
/*validate*/
/*grid*/
/*toolbar*/
/*tooltip*/
/*modal*/
/*checkbox*/
/*radio*/
/*button*/
/*input*/
/*textarea*/
/*form*/
/*select*/
/*switch*/
.vxe-table--filter-option {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer; }
.vxe-table--filter-option .vxe-checkbox--icon {
display: none;
position: absolute;
height: 1em;
width: 1em; }
.vxe-table--filter-option .vxe-checkbox--icon {
font-size: 16px; }
.vxe-table--filter-option .vxe-checkbox--icon:before {
content: "";
position: absolute;
height: 1em;
width: 1em;
top: 0;
left: 0;
background-color: #fff;
border-radius: 2px;
border: 2px solid #dcdfe6; }
.vxe-table--filter-option .vxe-checkbox--unchecked-icon {
display: inline-block; }
.vxe-table--filter-option .vxe-checkbox--checked-icon:after {
content: "";
position: absolute;
height: 0.64em;
width: 0.32em;
top: 50%;
left: 50%;
border: 2px solid #fff;
border-left: 0;
border-top: 0;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg); }
.vxe-table--filter-option .vxe-checkbox--indeterminate-icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 2px;
width: 0.6em;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.is--checked.vxe-table--filter-option, .is--indeterminate.vxe-table--filter-option {
color: #409eff; }
.is--checked.vxe-table--filter-option .vxe-checkbox--unchecked-icon, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--unchecked-icon {
display: none; }
.is--checked.vxe-table--filter-option .vxe-checkbox--icon:before, .is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon:before {
border-color: #409eff;
background-color: #409eff; }
.is--checked.vxe-table--filter-option .vxe-checkbox--checked-icon {
display: inline-block; }
.is--indeterminate.vxe-table--filter-option .vxe-checkbox--indeterminate-icon {
display: inline-block; }
.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon:before {
border-color: #409eff; }
.is--disabled.vxe-table--filter-option {
cursor: not-allowed;
color: #BFBFBF; }
.is--disabled.vxe-table--filter-option .vxe-checkbox--icon:before {
border-color: #dcdfe6;
background-color: #f3f3f3; }
.is--disabled.vxe-table--filter-option .vxe-checkbox--icon:after {
border-color: #c0c4cc; }
/*筛选*/
.vxe-cell--filter {
padding: 0 0.1em 0 0.25em;
text-align: center;
vertical-align: middle;
display: inline-block;
line-height: 0; }
.vxe-cell--filter.is--active .vxe-filter--btn {
color: #606266; }
.vxe-cell--filter .vxe-filter--btn {
color: #c0c4cc;
cursor: pointer; }
.vxe-cell--filter .vxe-filter--btn:hover {
color: #606266; }
.filter--active .vxe-cell--filter .vxe-filter--btn {
color: #409eff; }
/*筛选容器*/
.vxe-table--filter-wrapper {
display: none;
position: absolute;
min-width: 100px;
border-radius: 4px;
background-color: #fff;
border: 1px solid #DADCE0;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
z-index: 10; }
.vxe-table--filter-wrapper:not(.is--multiple) {
text-align: center; }
.vxe-table--filter-wrapper.filter--active {
display: block; }
.vxe-table--filter-wrapper .vxe-table--filter-header > li,
.vxe-table--filter-wrapper .vxe-table--filter-body > li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 360px;
padding: 0.25em 0.8em;
cursor: pointer; }
.vxe-table--filter-wrapper .vxe-table--filter-header > li.is--checked,
.vxe-table--filter-wrapper .vxe-table--filter-body > li.is--checked {
color: #409eff; }
.vxe-table--filter-wrapper .vxe-table--filter-header > li:hover,
.vxe-table--filter-wrapper .vxe-table--filter-body > li:hover {
background-color: #f5f7fa; }
.vxe-table--filter-wrapper .vxe-table--filter-header {
padding-top: 0.2em; }
.vxe-table--filter-wrapper .vxe-table--filter-body {
max-height: 240px;
padding-bottom: 0.2em; }
.vxe-table--filter-wrapper > ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.vxe-table--filter-wrapper.is--multiple > ul > li {
padding: 0.25em 0.8em 0.25em 2.3em; }
.vxe-table--filter-wrapper .vxe-table--filter-footer {
border-top: 1px solid #DADCE0;
padding: 0.6em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.vxe-table--filter-wrapper .vxe-table--filter-footer button {
background-color: transparent;
padding: 0 0.4em;
border: 0;
color: #606266;
cursor: pointer; }
.vxe-table--filter-wrapper .vxe-table--filter-footer button:focus {
outline: none; }
.vxe-table--filter-wrapper .vxe-table--filter-footer button:hover {
color: #409eff; }
.vxe-table--filter-wrapper .vxe-table--filter-footer button.is--disabled {
color: #BFBFBF;
cursor: not-allowed; }
.vxe-table--filter-option .vxe-checkbox--icon {
left: 0.6em;
top: 0.38em; }
.vxe-table .vxe-table--filter-option > .vxe-checkbox--icon {
font-size: 16px; }
.vxe-table.size--medium .vxe-table--filter-option > .vxe-checkbox--icon {
font-size: 15px; }
.vxe-table.size--small .vxe-table--filter-option > .vxe-checkbox--icon {
font-size: 14px; }
.vxe-table.size--mini .vxe-table--filter-option > .vxe-checkbox--icon {
font-size: 14px; }