UNPKG

vhb-table

Version:

一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

1,143 lines (1,039 loc) 44.9 kB
@charset "UTF-8"; /*font*/ /*size*/ /*icon*/ /*color*/ /*input/radio/checkbox*/ /*popup*/ /*table*/ /*filter*/ /*menu*/ /*loading*/ /*validate*/ /*grid*/ /*toolbar*/ /*tooltip*/ /*pager*/ /*modal*/ /*checkbox*/ /*radio*/ /*button*/ /*input*/ /*textarea*/ /*form*/ /*select*/ /*switch*/ /*pulldown*/ .vhb-table--render-default .vhb-cell--radio, .vhb-table--render-default .vhb-cell--checkbox { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--icon, .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--icon { display: none; position: absolute; height: 1em; width: 1em; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--icon { font-size: 16px; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--icon:before { content: ""; position: absolute; height: 1em; width: 1em; top: 0; left: 0; border: 2px solid #dcdfe6; background-color: #fff; border-radius: 50%; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--unchecked-icon { display: inline-block; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--checked-icon:after { content: ""; position: absolute; height: 0.25em; width: 0.25em; top: 0.4em; left: 0.4em; border-radius: 50%; background-color: #fff; } .vhb-table--render-default .is--checked.vhb-cell--radio { color: #409eff; } .vhb-table--render-default .is--checked.vhb-cell--radio .vhb-radio--unchecked-icon { display: none; } .vhb-table--render-default .is--checked.vhb-cell--radio .vhb-radio--checked-icon { display: inline-block; } .vhb-table--render-default .is--checked.vhb-cell--radio .vhb-radio--checked-icon:before { border-color: #409eff; background-color: #409eff; } .vhb-table--render-default .vhb-cell--radio:not(.is--disabled):hover .vhb-radio--icon:before { border-color: #409eff; } .vhb-table--render-default .is--disabled.vhb-cell--radio { cursor: not-allowed; color: #BFBFBF; } .vhb-table--render-default .is--disabled.vhb-cell--radio .vhb-radio--icon:before { border-color: #dcdfe6; background-color: #f3f3f3; } .vhb-table--render-default .is--disabled.vhb-cell--radio .vhb-radio--icon:after { background-color: #c0c4cc; } .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--icon { font-size: 16px; } .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--icon:before { content: ""; position: absolute; height: 1em; width: 1em; top: 0; left: 0; background-color: #fff; border-radius: 2px; border: 2px solid #dcdfe6; } .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--unchecked-icon { display: inline-block; } .vhb-table--render-default .vhb-cell--checkbox .vhb-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); } .vhb-table--render-default .vhb-cell--checkbox .vhb-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%); } .vhb-table--render-default .is--checked.vhb-cell--checkbox, .vhb-table--render-default .is--indeterminate.vhb-cell--checkbox { color: #409eff; } .vhb-table--render-default .is--checked.vhb-cell--checkbox .vhb-checkbox--unchecked-icon, .vhb-table--render-default .is--indeterminate.vhb-cell--checkbox .vhb-checkbox--unchecked-icon { display: none; } .vhb-table--render-default .is--checked.vhb-cell--checkbox .vhb-checkbox--icon:before, .vhb-table--render-default .is--indeterminate.vhb-cell--checkbox .vhb-checkbox--icon:before { border-color: #409eff; background-color: #409eff; } .vhb-table--render-default .is--checked.vhb-cell--checkbox .vhb-checkbox--checked-icon { display: inline-block; } .vhb-table--render-default .is--indeterminate.vhb-cell--checkbox .vhb-checkbox--indeterminate-icon { display: inline-block; } .vhb-table--render-default .vhb-cell--checkbox:not(.is--disabled):hover .vhb-checkbox--icon:before { border-color: #409eff; } .vhb-table--render-default .is--disabled.vhb-cell--checkbox { cursor: not-allowed; color: #BFBFBF; } .vhb-table--render-default .is--disabled.vhb-cell--checkbox .vhb-checkbox--icon:before { border-color: #dcdfe6; background-color: #f3f3f3; } .vhb-table--render-default .is--disabled.vhb-cell--checkbox .vhb-checkbox--icon:after { border-color: #c0c4cc; } .vhb-table--render-default .is--disabled.vhb-cell--checkbox .vhb-checkbox--indeterminate-icon:after { background-color: #c0c4cc; } [class*="vhb-"], [class*="vhb-"]:after, [class*="vhb-"]:before, [class*="vhb-"] *:after, [class*="vhb-"] *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .vhb-table--render-default .vhb-header--column.col--ellipsis:not(.col--actived) > .vhb-cell, .vhb-table--render-default .vhb-body--column.col--ellipsis:not(.col--actived) > .vhb-cell, .vhb-table--render-default .vhb-footer--column.col--ellipsis:not(.col--actived) > .vhb-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [class*="vhb-"] { font-variant: tabular-nums; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; } .vhb-primary-color { color: #409eff; } .vhb-success-color { color: #67c23a; } .vhb-info-color { color: #909399; } .vhb-warning-color { color: #e6a23c; } .vhb-danger-color { color: #f56c6c; } .vhb-perfect-color { color: #f8f8f9; } .vhb-row:after { content: ''; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; } .vhb-row > .vhb-col--1 { float: left; width: 4.16667%; } .vhb-row > .vhb-col--2 { float: left; width: 8.33333%; } .vhb-row > .vhb-col--3 { float: left; width: 12.5%; } .vhb-row > .vhb-col--4 { float: left; width: 16.66667%; } .vhb-row > .vhb-col--5 { float: left; width: 20.83333%; } .vhb-row > .vhb-col--6 { float: left; width: 25%; } .vhb-row > .vhb-col--7 { float: left; width: 29.16667%; } .vhb-row > .vhb-col--8 { float: left; width: 33.33333%; } .vhb-row > .vhb-col--9 { float: left; width: 37.5%; } .vhb-row > .vhb-col--10 { float: left; width: 41.66667%; } .vhb-row > .vhb-col--11 { float: left; width: 45.83333%; } .vhb-row > .vhb-col--12 { float: left; width: 50%; } .vhb-row > .vhb-col--13 { float: left; width: 54.16667%; } .vhb-row > .vhb-col--14 { float: left; width: 58.33333%; } .vhb-row > .vhb-col--15 { float: left; width: 62.5%; } .vhb-row > .vhb-col--16 { float: left; width: 66.66667%; } .vhb-row > .vhb-col--17 { float: left; width: 70.83333%; } .vhb-row > .vhb-col--18 { float: left; width: 75%; } .vhb-row > .vhb-col--19 { float: left; width: 79.16667%; } .vhb-row > .vhb-col--20 { float: left; width: 83.33333%; } .vhb-row > .vhb-col--21 { float: left; width: 87.5%; } .vhb-row > .vhb-col--22 { float: left; width: 91.66667%; } .vhb-row > .vhb-col--23 { float: left; width: 95.83333%; } .vhb-row > .vhb-col--24 { float: left; width: 100%; } /*animat*/ .is--animat .vhb-sort--asc-btn:before, .is--animat .vhb-sort--asc-btn:after, .is--animat .vhb-sort--desc-btn:before, .is--animat .vhb-sort--desc-btn:after, .is--animat .vhb-filter--btn:before, .is--animat .vhb-filter--btn:after { -webkit-transition: border 0.1s ease-in-out; transition: border 0.1s ease-in-out; } .is--animat .vhb-input--wrapper .vhb-input { -webkit-transition: border 0.1s ease-in-out; transition: border 0.1s ease-in-out; } .is--animat .vhb-table--expand-btn, .is--animat .vhb-tree--node-btn { -webkit-transition: -webkit-transform 0.1s ease-in-out; transition: -webkit-transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out; } .is--animat .vhb-checkbox > input:checked + span, .is--animat .vhb-radio > input:checked + span { -webkit-transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out; } /*加载中*/ .vhb-loading { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: rgba(0, 0, 0, 0.2); } .vhb-loading.is--visible { display: block; } .vhb-loading .vhb-loading--spinner { width: 56px; height: 56px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .vhb-loading .vhb-loading--spinner:before, .vhb-loading .vhb-loading--spinner:after { content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: #409eff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .vhb-loading .vhb-loading--spinner:after { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .size--mini .vhb-loading .vhb-loading--spinner { width: 38px; height: 38px; } .size--small .vhb-loading .vhb-loading--spinner { width: 44px; height: 44px; } .size--medium .vhb-loading .vhb-loading--spinner { width: 50px; height: 50px; } .vhb-table--render-default.vhb-editable .vhb-body--column, .vhb-table--render-default .vhb-header--column.col--ellipsis, .vhb-table--render-default .vhb-body--column.col--ellipsis, .vhb-table--render-default .vhb-footer--column.col--ellipsis { height: 48px; } .vhb-table--render-default.vhb-editable.size--medium .vhb-body--column, .vhb-table--render-default.size--medium .vhb-header--column.col--ellipsis, .vhb-table--render-default.size--medium .vhb-body--column.col--ellipsis, .vhb-table--render-default.size--medium .vhb-footer--column.col--ellipsis { height: 44px; } .vhb-table--render-default.vhb-editable.size--small .vhb-body--column, .vhb-table--render-default.size--small .vhb-header--column.col--ellipsis, .vhb-table--render-default.size--small .vhb-body--column.col--ellipsis, .vhb-table--render-default.size--small .vhb-footer--column.col--ellipsis { height: 40px; } .vhb-table--render-default.vhb-editable.size--mini .vhb-body--column, .vhb-table--render-default.size--mini .vhb-header--column.col--ellipsis, .vhb-table--render-default.size--mini .vhb-body--column.col--ellipsis, .vhb-table--render-default.size--mini .vhb-footer--column.col--ellipsis { height: 36px; } .vhb-table-slots, .vhb-table--file-form { display: none; } .vhb-table--print-frame { position: fixed; bottom: -100%; left: -100%; height: 0; width: 0; border: 0; } .vhb-table--body-wrapper { scroll-behavior: auto; } .vhb-table--body-wrapper, .vhb-table--fixed-left-body-wrapper, .vhb-table--fixed-right-body-wrapper { overflow-y: auto; overflow-x: auto; } /*默认的渲染*/ .vhb-cell .vhb-default-input, .vhb-cell .vhb-default-textarea, .vhb-table--filter-wrapper .vhb-default-input, .vhb-table--filter-wrapper .vhb-default-textarea { background-color: #ffffff; } .vhb-cell .vhb-default-input, .vhb-cell .vhb-default-textarea, .vhb-cell .vhb-default-select, .vhb-table--filter-wrapper .vhb-default-input, .vhb-table--filter-wrapper .vhb-default-textarea, .vhb-table--filter-wrapper .vhb-default-select { outline: 0; padding: 0 2px; width: 100%; color: #606266; border-radius: 4px; border: 1px solid #dcdfe6; } .vhb-cell .vhb-default-input:focus, .vhb-cell .vhb-default-textarea:focus, .vhb-cell .vhb-default-select:focus, .vhb-table--filter-wrapper .vhb-default-input:focus, .vhb-table--filter-wrapper .vhb-default-textarea:focus, .vhb-table--filter-wrapper .vhb-default-select:focus { border: 1px solid #409eff; } .vhb-cell .vhb-default-input[disabled], .vhb-cell .vhb-default-textarea[disabled], .vhb-cell .vhb-default-select[disabled], .vhb-table--filter-wrapper .vhb-default-input[disabled], .vhb-table--filter-wrapper .vhb-default-textarea[disabled], .vhb-table--filter-wrapper .vhb-default-select[disabled] { cursor: not-allowed; background-color: #f3f3f3; } .vhb-cell .vhb-default-input, .vhb-cell .vhb-default-textarea, .vhb-cell .vhb-default-select, .vhb-table--filter-wrapper .vhb-default-input, .vhb-table--filter-wrapper .vhb-default-textarea, .vhb-table--filter-wrapper .vhb-default-select { height: 34px; } .vhb-cell .vhb-default-input[type="date"]::-webkit-inner-spin-button, .vhb-table--filter-wrapper .vhb-default-input[type="date"]::-webkit-inner-spin-button { margin-top: 4px; } .vhb-cell .vhb-default-input[type="date"]::-webkit-inner-spin-button, .vhb-cell .vhb-default-input[type="number"]::-webkit-inner-spin-button, .vhb-table--filter-wrapper .vhb-default-input[type="date"]::-webkit-inner-spin-button, .vhb-table--filter-wrapper .vhb-default-input[type="number"]::-webkit-inner-spin-button { height: 24px; } .vhb-cell .vhb-default-input::-webkit-input-placeholder, .vhb-table--filter-wrapper .vhb-default-input::-webkit-input-placeholder { color: #C0C4CC; } .vhb-cell .vhb-default-input::-moz-placeholder, .vhb-table--filter-wrapper .vhb-default-input::-moz-placeholder { color: #C0C4CC; } .vhb-cell .vhb-default-input:-ms-input-placeholder, .vhb-table--filter-wrapper .vhb-default-input:-ms-input-placeholder { color: #C0C4CC; } .vhb-cell .vhb-default-input::-ms-input-placeholder, .vhb-table--filter-wrapper .vhb-default-input::-ms-input-placeholder { color: #C0C4CC; } .vhb-cell .vhb-default-input::placeholder, .vhb-table--filter-wrapper .vhb-default-input::placeholder { color: #C0C4CC; } .vhb-cell .vhb-default-textarea, .vhb-table--filter-wrapper .vhb-default-textarea { resize: none; vertical-align: middle; } .vhb-cell .vhb-input, .vhb-cell .vhb-textarea, .vhb-cell .vhb-select, .vhb-table--filter-wrapper .vhb-input, .vhb-table--filter-wrapper .vhb-textarea, .vhb-table--filter-wrapper .vhb-select { width: 100%; display: block; } .vhb-cell .vhb-input > .vhb-input--inner, .vhb-cell .vhb-textarea > .vhb-textarea--inner, .vhb-table--filter-wrapper .vhb-input > .vhb-input--inner, .vhb-table--filter-wrapper .vhb-textarea > .vhb-textarea--inner { padding: 0 2px; } .vhb-cell .vhb-textarea--inner, .vhb-cell .vhb-default-textarea, .vhb-table--filter-wrapper .vhb-textarea--inner, .vhb-table--filter-wrapper .vhb-default-textarea { resize: none; } .vhb-table--checkbox-range, .vhb-table--cell-main-area, .vhb-table--cell-extend-area, .vhb-table--cell-active-area, .vhb-table--cell-copy-area { display: none; position: absolute; pointer-events: none; z-index: 1; } .vhb-table--fixed-left-wrapper .vhb-table--checkbox-range, .vhb-table--fixed-left-wrapper .vhb-table--cell-main-area, .vhb-table--fixed-left-wrapper .vhb-table--cell-extend-area, .vhb-table--fixed-left-wrapper .vhb-table--cell-active-area, .vhb-table--fixed-left-wrapper .vhb-table--cell-copy-area, .vhb-table--fixed-right-wrapper .vhb-table--checkbox-range, .vhb-table--fixed-right-wrapper .vhb-table--cell-main-area, .vhb-table--fixed-right-wrapper .vhb-table--cell-extend-area, .vhb-table--fixed-right-wrapper .vhb-table--cell-active-area, .vhb-table--fixed-right-wrapper .vhb-table--cell-copy-area { z-index: 2; } .vhb-table--fixed-left-wrapper .vhb-table--cell-main-area[half="1"], .vhb-table--fixed-left-wrapper .vhb-table--cell-extend-area[half="1"], .vhb-table--fixed-left-wrapper .vhb-table--cell-active-area[half="1"] { border-right: 0; } .vhb-table--fixed-left-wrapper .vhb-table--cell-copy-area[half="1"] { background-size: 3px 12px, 0 12px, 12px 3px, 12px 3px; } .vhb-table--fixed-right-wrapper .vhb-table--cell-main-area[half="1"], .vhb-table--fixed-right-wrapper .vhb-table--cell-extend-area[half="1"], .vhb-table--fixed-right-wrapper .vhb-table--cell-active-area[half="1"] { border-left: 0; } .vhb-table--fixed-right-wrapper .vhb-table--cell-copy-area[half="1"] { background-size: 0 12px, 3px 12px, 12px 3px, 12px 3px; } /*复选框-范围选择*/ .vhb-table--checkbox-range { background-color: rgba(50, 128, 252, 0.2); border: 1px solid #006af1; } .vhb-table--cell-area { height: 0; font-size: 0; display: none; } .vhb-table--cell-area > .vhb-table--cell-main-area { background-color: rgba(64, 158, 255, 0.2); border: 1px solid #409eff; } .vhb-table--cell-area .vhb-table--cell-main-area-btn { display: none; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-style: solid; border-color: #fff; border-width: 1px 0 0 1px; background-color: #409eff; pointer-events: auto; cursor: crosshair; } .vhb-table--cell-area .vhb-table--cell-extend-area { border: 2px solid #409eff; } @-webkit-keyframes moveCopyCellBorder { from { } to { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%; } } @keyframes moveCopyCellBorder { from { } to { background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%; } } .vhb-table--cell-copy-area { background: linear-gradient(0deg, transparent 6px, #409eff 6px) repeat-y, linear-gradient(0deg, transparent 50%, #409eff 0) repeat-y, linear-gradient(90deg, transparent 50%, #409eff 0) repeat-x, linear-gradient(90deg, transparent 50%, #409eff 0) repeat-x; background-size: 3px 12px, 3px 12px, 12px 3px, 12px 3px; background-position: 0 0, 100% 0, 0 0, 0 100%; -webkit-animation: moveCopyCellBorder .5s infinite linear; animation: moveCopyCellBorder .5s infinite linear; } .vhb-table--cell-active-area { border: 2px solid #409eff; } .vhb-table--cell-multi-area > .vhb-table--cell-main-area { background-color: rgba(64, 158, 255, 0.2); } /*圆角*/ .vhb-table--render-default.is--round .vhb-table--render-default.is--round, .vhb-table--render-default.is--round .vhb-table--border-line, .vhb-table--render-default.is--round:not(.is--header):not(.is--footer) .vhb-table--body-wrapper.body--wrapper { border-radius: 4px; } .vhb-table--render-default.is--round.is--header .vhb-table--header-wrapper.body--wrapper, .vhb-table--render-default.is--round.is--footer:not(.is--header) .vhb-table--body-wrapper.body--wrapper { border-radius: 4px 4px 0 0; } .vhb-table--render-default.is--round.is--header .vhb-table--header-wrapper.fixed-left--wrapper { border-radius: 4px 0 0 0; } .vhb-table--render-default.is--round.is--header .vhb-table--header-wrapper.fixed-right--wrapper { border-radius: 0 4px 0 0; } .vhb-table--render-default.is--round.is--header:not(.is--footer) .vhb-table--body-wrapper.body--wrapper, .vhb-table--render-default.is--round.is--footer .vhb-table--footer-wrapper.body--wrapper { border-radius: 0 0 4px 4px; } .vhb-table--render-default.is--round.is--header:not(.is--footer) .vhb-table--body-wrapper.fixed-left--wrapper, .vhb-table--render-default.is--round.is--footer:not(.is--header) .vhb-table--body-wrapper.fixed-left--wrapper, .vhb-table--render-default.is--round.is--footer .vhb-table--footer-wrapper.fixed-left--wrapper { border-radius: 0 0 0 4px; } .vhb-table--render-default.is--round.is--header:not(.is--footer) .vhb-table--body-wrapper.fixed-right--wrapper, .vhb-table--render-default.is--round.is--footer:not(.is--header) .vhb-table--body-wrapper.fixed-right--wrapper, .vhb-table--render-default.is--round.is--footer .vhb-table--footer-wrapper.fixed-right--wrapper { border-radius: 0 0 4px 0; } /*table*/ .vhb-table--render-default { position: relative; font-size: 14px; color: #606266; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; direction: ltr; /*边框*/ /*列宽线*/ /*边框线*/ /*树形节点*/ /*展开行*/ /*设置列高度*/ /*溢出列*/ /*暂无数据*/ /*校验不通过*/ /*单元格编辑状态*/ /*可编辑*/ } .vhb-table--render-default .vhb-table--body-wrapper { background-color: #ffffff; } .vhb-table--render-default .vhb-table--footer-wrapper { background-color: #ffffff; } .vhb-table--render-default .vhb-table--header, .vhb-table--render-default .vhb-table--body, .vhb-table--render-default .vhb-table--footer { border: 0; border-spacing: 0; border-collapse: separate; table-layout: fixed; } .vhb-table--render-default .vhb-table--header-wrapper, .vhb-table--render-default .vhb-table--footer-wrapper { overflow-x: hidden; overflow-y: hidden; } .vhb-table--render-default:not(.is--empty).is--footer.is--scroll-x .vhb-table--body-wrapper { overflow-x: scroll; } .vhb-table--render-default .vhb-body--row.row--stripe { background-color: #fafafa; } .vhb-table--render-default .vhb-body--row.row--radio { background-color: #fff3e0; } .vhb-table--render-default .vhb-body--row.row--checked { background-color: #fff3e0; } .vhb-table--render-default .vhb-body--row.row--current { background-color: #e6f7ff; } .vhb-table--render-default .vhb-body--row.row--hover { background-color: #f5f7fa; } .vhb-table--render-default .vhb-body--row.row--hover.row--stripe { background-color: #f5f7fa; } .vhb-table--render-default .vhb-body--row.row--hover.row--radio { background-color: #ffebbc; } .vhb-table--render-default .vhb-body--row.row--hover.row--checked { background-color: #ffebbc; } .vhb-table--render-default .vhb-body--row.row--hover.row--current { background-color: #d7effb; } .vhb-table--render-default.drag--resize .vhb-table--main-wrapper *, .vhb-table--render-default.drag--resize .vhb-table--fixed-left-wrapper *, .vhb-table--render-default.drag--resize .vhb-table--fixed-right-wrapper * { cursor: col-resize; } .vhb-table--render-default.drag--range .vhb-table--main-wrapper *, .vhb-table--render-default.drag--range .vhb-table--fixed-left-wrapper *, .vhb-table--render-default.drag--range .vhb-table--fixed-right-wrapper *, .vhb-table--render-default.drag--area .vhb-table--main-wrapper *, .vhb-table--render-default.drag--area .vhb-table--fixed-left-wrapper *, .vhb-table--render-default.drag--area .vhb-table--fixed-right-wrapper * { cursor: default; } .vhb-table--render-default.drag--extend-range .vhb-table--main-wrapper *, .vhb-table--render-default.drag--extend-range .vhb-table--fixed-left-wrapper *, .vhb-table--render-default.drag--extend-range .vhb-table--fixed-right-wrapper * { cursor: crosshair; } .vhb-table--render-default.column--highlight .vhb-header--column:not(.col--seq):hover { background-color: #d7effb; } .vhb-table--render-default.cell--area .vhb-table--main-wrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vhb-table--render-default .vhb-header--column, .vhb-table--render-default .vhb-body--column, .vhb-table--render-default .vhb-footer--column { position: relative; line-height: 22px; text-align: left; } .vhb-table--render-default .vhb-header--column:not(.col--ellipsis), .vhb-table--render-default .vhb-body--column:not(.col--ellipsis), .vhb-table--render-default .vhb-footer--column:not(.col--ellipsis) { padding: 13px 0; } .vhb-table--render-default .vhb-header--column.col--current, .vhb-table--render-default .vhb-body--column.col--current, .vhb-table--render-default .vhb-footer--column.col--current { background-color: #e6f7ff; } .vhb-table--render-default .vhb-header--column.col--center, .vhb-table--render-default .vhb-body--column.col--center, .vhb-table--render-default .vhb-footer--column.col--center { text-align: center; } .vhb-table--render-default .vhb-header--column.col--right, .vhb-table--render-default .vhb-body--column.col--right, .vhb-table--render-default .vhb-footer--column.col--right { text-align: right; } .vhb-table--render-default .vhb-header--column.col--ellipsis.col--center .vhb-cell, .vhb-table--render-default .vhb-footer--column.col--ellipsis.col--center .vhb-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .vhb-table--render-default .vhb-header--column.col--ellipsis.col--right .vhb-cell, .vhb-table--render-default .vhb-footer--column.col--ellipsis.col--right .vhb-cell { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .vhb-table--render-default .vhb-body--column.col--checkbox { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vhb-table--render-default .vhb-table--footer-wrapper { border-top: 1px solid #e8eaec; } .vhb-table--render-default.border--default .vhb-table--header-wrapper, .vhb-table--render-default.border--full .vhb-table--header-wrapper, .vhb-table--render-default.border--outer .vhb-table--header-wrapper { background-color: #f8f8f9; } .vhb-table--render-default.border--default .vhb-header--column, .vhb-table--render-default.border--default .vhb-body--column, .vhb-table--render-default.border--default .vhb-footer--column, .vhb-table--render-default.border--inner .vhb-header--column, .vhb-table--render-default.border--inner .vhb-body--column, .vhb-table--render-default.border--inner .vhb-footer--column { background-image: -webkit-gradient(linear, left top, left bottom, from(#e8eaec), to(#e8eaec)); background-image: linear-gradient(#e8eaec, #e8eaec); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } .vhb-table--render-default.border--full .vhb-header--column, .vhb-table--render-default.border--full .vhb-body--column, .vhb-table--render-default.border--full .vhb-footer--column { background-image: -webkit-gradient(linear, left top, left bottom, from(#e8eaec), to(#e8eaec)), -webkit-gradient(linear, left top, left bottom, from(#e8eaec), to(#e8eaec)); background-image: linear-gradient(#e8eaec, #e8eaec), linear-gradient(#e8eaec, #e8eaec); background-repeat: no-repeat; background-size: 1px 100%, 100% 1px; background-position: right top, right bottom; } .vhb-table--render-default.border--full .vhb-table--fixed-left-wrapper .vhb-body--column { border-right-color: #e8eaec; } .vhb-table--render-default.border--default .vhb-table--header-wrapper .vhb-header--row:last-child .vhb-header--gutter, .vhb-table--render-default.border--full .vhb-table--header-wrapper .vhb-header--row:last-child .vhb-header--gutter, .vhb-table--render-default.border--outer .vhb-table--header-wrapper .vhb-header--row:last-child .vhb-header--gutter, .vhb-table--render-default.border--inner .vhb-table--header-wrapper .vhb-header--row:last-child .vhb-header--gutter { background-image: -webkit-gradient(linear, left top, left bottom, from(#e8eaec), to(#e8eaec)); background-image: linear-gradient(#e8eaec, #e8eaec); background-repeat: no-repeat; background-size: 100% 1px; background-position: right bottom; } .vhb-table--render-default.border--inner .vhb-table--header-wrapper, .vhb-table--render-default.border--none .vhb-table--header-wrapper { background-color: #ffffff; } .vhb-table--render-default.border--inner .vhb-table--fixed-left-wrapper, .vhb-table--render-default.border--none .vhb-table--fixed-left-wrapper { border-right: 0; } .vhb-table--render-default.border--inner .vhb-table--border-line { border-width: 0 0 1px 0; } .vhb-table--render-default.border--none .vhb-table--border-line { display: none; } .vhb-table--render-default.border--none .vhb-table--header-border-line { display: none; } .vhb-table--render-default.border--none .vhb-table--footer-wrapper { border-top: 0; } .vhb-table--render-default.size--medium { font-size: 14px; } .vhb-table--render-default.size--medium .vhb-table--empty-placeholder, .vhb-table--render-default.size--medium .vhb-table--empty-block { min-height: 44px; } .vhb-table--render-default.size--medium .vhb-header--column:not(.col--ellipsis), .vhb-table--render-default.size--medium .vhb-body--column:not(.col--ellipsis), .vhb-table--render-default.size--medium .vhb-footer--column:not(.col--ellipsis) { padding: 11px 0; } .vhb-table--render-default.size--medium .vhb-cell .vhb-default-input, .vhb-table--render-default.size--medium .vhb-cell .vhb-default-textarea, .vhb-table--render-default.size--medium .vhb-cell .vhb-default-select { height: 32px; } .vhb-table--render-default.size--medium .vhb-cell .vhb-default-input[type="date"]::-webkit-inner-spin-button { margin-top: 3px; } .vhb-table--render-default.size--small { font-size: 13px; } .vhb-table--render-default.size--small .vhb-table--empty-placeholder, .vhb-table--render-default.size--small .vhb-table--empty-block { min-height: 40px; } .vhb-table--render-default.size--small .vhb-header--column:not(.col--ellipsis), .vhb-table--render-default.size--small .vhb-body--column:not(.col--ellipsis), .vhb-table--render-default.size--small .vhb-footer--column:not(.col--ellipsis) { padding: 9px 0; } .vhb-table--render-default.size--small .vhb-cell .vhb-default-input, .vhb-table--render-default.size--small .vhb-cell .vhb-default-textarea, .vhb-table--render-default.size--small .vhb-cell .vhb-default-select { height: 30px; } .vhb-table--render-default.size--small .vhb-cell .vhb-default-input[type="date"]::-webkit-inner-spin-button { margin-top: 2px; } .vhb-table--render-default.size--mini { font-size: 12px; } .vhb-table--render-default.size--mini .vhb-table--empty-placeholder, .vhb-table--render-default.size--mini .vhb-table--empty-block { min-height: 36px; } .vhb-table--render-default.size--mini .vhb-header--column:not(.col--ellipsis), .vhb-table--render-default.size--mini .vhb-body--column:not(.col--ellipsis), .vhb-table--render-default.size--mini .vhb-footer--column:not(.col--ellipsis) { padding: 7px 0; } .vhb-table--render-default.size--mini .vhb-cell .vhb-default-input, .vhb-table--render-default.size--mini .vhb-cell .vhb-default-textarea, .vhb-table--render-default.size--mini .vhb-cell .vhb-default-select { height: 28px; } .vhb-table--render-default.size--mini .vhb-cell .vhb-default-input[type="date"]::-webkit-inner-spin-button { margin-top: 1px; } .vhb-table--render-default .vhb-cell { white-space: pre-line; word-break: break-all; padding-left: 10px; padding-right: 10px; } .vhb-table--render-default .vhb-cell--placeholder { color: #C0C4CC; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--icon, .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--icon { left: 0; top: 0.1em; } .vhb-table--render-default .vhb-cell--radio .vhb-radio--label, .vhb-table--render-default .vhb-cell--checkbox .vhb-checkbox--label { padding-left: 0.5em; } .vhb-table--render-default .vhb-cell--radio, .vhb-table--render-default .vhb-cell--checkbox { padding-left: 1.2em; } .vhb-table--render-default .fixed--hidden { visibility: hidden; } .vhb-table--render-default .vhb-table--fixed-left-wrapper, .vhb-table--render-default .vhb-table--fixed-right-wrapper { width: 100%; position: absolute; top: 0; z-index: 5; overflow: hidden; background-color: inherit; -webkit-transition: 0.3s -webkit-box-shadow; transition: 0.3s -webkit-box-shadow; transition: 0.3s box-shadow; transition: 0.3s box-shadow, 0.3s -webkit-box-shadow; } .vhb-table--render-default .vhb-table--fixed-left-wrapper .vhb-table--body-wrapper, .vhb-table--render-default .vhb-table--fixed-right-wrapper .vhb-table--body-wrapper { overflow-x: hidden; } .vhb-table--render-default .vhb-table--fixed-left-wrapper .vhb-table--body-wrapper { width: calc(100% + 40px); } .vhb-table--render-default.is--header .vhb-table--fixed-left-wrapper .vhb-table--body-wrapper:before, .vhb-table--render-default.is--header .vhb-table--fixed-right-wrapper .vhb-table--body-wrapper:before { display: none; } .vhb-table--render-default .vhb-table--fixed-left-wrapper { left: 0; width: 200px; } .vhb-table--render-default .vhb-table--fixed-left-wrapper.scrolling--middle { -webkit-box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12); box-shadow: 4px 3px 4px 0px rgba(0, 0, 0, 0.12); } .vhb-table--render-default .vhb-table--fixed-right-wrapper { right: 0; } .vhb-table--render-default .vhb-table--fixed-right-wrapper.scrolling--middle { -webkit-box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12); box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.12); } .vhb-table--render-default .vhb-table--header-wrapper, .vhb-table--render-default .vhb-table--body-wrapper, .vhb-table--render-default .vhb-table--footer-wrapper { position: relative; } .vhb-table--render-default .vhb-table--header-wrapper.fixed-left--wrapper, .vhb-table--render-default .vhb-table--header-wrapper.fixed-right--wrapper, .vhb-table--render-default .vhb-table--body-wrapper.fixed-left--wrapper, .vhb-table--render-default .vhb-table--body-wrapper.fixed-right--wrapper, .vhb-table--render-default .vhb-table--footer-wrapper.fixed-left--wrapper, .vhb-table--render-default .vhb-table--footer-wrapper.fixed-right--wrapper { position: absolute; top: 0; } .vhb-table--render-default .vhb-table--header-wrapper.fixed-left--wrapper, .vhb-table--render-default .vhb-table--body-wrapper.fixed-left--wrapper, .vhb-table--render-default .vhb-table--footer-wrapper.fixed-left--wrapper { left: 0; } .vhb-table--render-default .vhb-table--header-wrapper.fixed-right--wrapper, .vhb-table--render-default .vhb-table--body-wrapper.fixed-right--wrapper, .vhb-table--render-default .vhb-table--footer-wrapper.fixed-right--wrapper { right: 0; overflow-y: auto; } .vhb-table--render-default .vhb-body--x-space { width: 100%; height: 1px; margin-bottom: -1px; } .vhb-table--render-default .vhb-body--y-space { width: 0; float: left; } .vhb-table--render-default .vhb-table--resizable-bar { display: none; position: absolute; top: 0; left: 0; width: 1px; height: 100%; z-index: 9; cursor: col-resize; } .vhb-table--render-default .vhb-table--resizable-bar:before { content: ""; display: block; height: 100%; background-color: #409eff; } .vhb-table--render-default .vhb-table--border-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; border: 1px solid #e8eaec; } .vhb-table--render-default.is--tree-line .vhb-body--row:first-child .vhb-tree--line { border-width: 0 0 1px 0; } .vhb-table--render-default.is--tree-line .vhb-body--row .vhb-body--column { background-image: none; } .vhb-table--render-default .vhb-tree--line-wrapper { position: relative; display: block; height: 0; } .vhb-table--render-default .vhb-tree--line { content: ""; position: absolute; bottom: -0.9em; width: 0.8em; border-width: 0 0 1px 1px; border-style: dotted; border-color: #909399; pointer-events: none; } .vhb-table--render-default .vhb-cell--tree-node { position: relative; } .vhb-table--render-default .vhb-tree--btn-wrapper { position: absolute; top: 50%; width: 1em; height: 1em; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .vhb-table--render-default .vhb-tree--node-btn { display: block; color: #939599; } .vhb-table--render-default .vhb-tree--node-btn:hover { color: #606266; } .vhb-table--render-default .vhb-tree-cell { display: block; padding-left: 1.5em; } .vhb-table--render-default .vhb-body--column.col--ellipsis > .vhb-cell .vhb-tree-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vhb-table--render-default .vhb-table--expanded { cursor: pointer; } .vhb-table--render-default .vhb-table--expanded .vhb-table--expand-btn { width: 1em; height: 1em; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #939599; } .vhb-table--render-default .vhb-table--expanded .vhb-table--expand-btn:hover { color: #606266; } .vhb-table--render-default .vhb-table--expanded + .vhb-table--expand-label { padding-left: 0.5em; } .vhb-table--render-default .vhb-body--expanded-column { border-bottom: 1px solid #e8eaec; } .vhb-table--render-default .vhb-body--expanded-column.col--ellipsis > .vhb-body--expanded-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vhb-table--render-default .vhb-body--expanded-cell { position: relative; z-index: 1; } .vhb-table--render-default .vhb-header--column.col--ellipsis > .vhb-cell, .vhb-table--render-default .vhb-body--column.col--ellipsis > .vhb-cell, .vhb-table--render-default .vhb-footer--column.col--ellipsis > .vhb-cell { max-height: 48px; } .vhb-table--render-default.size--medium .vhb-header--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--medium .vhb-body--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--medium .vhb-footer--column.col--ellipsis > .vhb-cell { max-height: 44px; } .vhb-table--render-default.size--medium .vhb-cell--checkbox .vhb-checkbox--icon { font-size: 15px; } .vhb-table--render-default.size--medium .vhb-cell--radio .vhb-radio--icon { font-size: 15px; } .vhb-table--render-default.size--small .vhb-header--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--small .vhb-body--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--small .vhb-footer--column.col--ellipsis > .vhb-cell { max-height: 40px; } .vhb-table--render-default.size--small .vhb-cell--checkbox .vhb-checkbox--icon { font-size: 14px; } .vhb-table--render-default.size--small .vhb-cell--radio .vhb-radio--icon { font-size: 14px; } .vhb-table--render-default.size--mini .vhb-header--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--mini .vhb-body--column.col--ellipsis > .vhb-cell, .vhb-table--render-default.size--mini .vhb-footer--column.col--ellipsis > .vhb-cell { max-height: 36px; } .vhb-table--render-default.size--mini .vhb-cell--checkbox .vhb-checkbox--icon { font-size: 14px; } .vhb-table--render-default.size--mini .vhb-cell--radio .vhb-radio--icon { font-size: 14px; } .vhb-table--render-default .vhb-table--empty-placeholder, .vhb-table--render-default .vhb-table--empty-block { min-height: 48px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; overflow: hidden; width: 100%; pointer-events: none; } .vhb-table--render-default .vhb-table--empty-block { display: none; visibility: hidden; } .vhb-table--render-default .vhb-table--empty-placeholder { display: none; position: absolute; top: 0; z-index: 5; } .vhb-table--render-default .vhb-table--empty-content { display: block; width: 50%; pointer-events: auto; } .vhb-table--render-default.is--empty .vhb-table--empty-block, .vhb-table--render-default.is--empty .vhb-table--empty-placeholder { display: -webkit-box; display: -ms-flexbox; display: flex; } .vhb-table--render-default .vhb-body--column.col--selected { -webkit-box-shadow: inset 0px 0px 0px 2px #409eff; box-shadow: inset 0px 0px 0px 2px #409eff; } .vhb-table--render-default .vhb-body--column.col--actived, .vhb-table--render-default .vhb-body--column.col--selected { position: relative; } .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-cell--valid { width: 320px; position: absolute; bottom: calc(100% + 4px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 4; } .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-cell--valid .vhb-cell--valid-msg { display: inline-block; border-radius: 4px; padding: 8px 12px; color: #fff; background-color: #f56c6c; pointer-events: auto; } .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-default-input, .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-default-textarea, .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-default-select { border-color: #f56c6c; } .vhb-table--render-default .vhb-body--column.col--valid-error .vhb-input > .vhb-input--inner { border-color: #f56c6c; } .vhb-table--render-default .vhb-body--row:first-child .vhb-cell--valid { bottom: auto; top: calc(100% + 4px); } .vhb-table--render-default .vhb-body--column:first-child .vhb-cell--valid { left: 10px; -webkit-transform: translateX(0); transform: translateX(0); text-align: left; } .vhb-table--render-default .vhb-body--row.row--new > .vhb-body--column { position: relative; } .vhb-table--render-default .vhb-body--row.row--new > .vhb-body--column:before { content: ""; top: -5px; left: -5px; position: absolute; border-width: 5px; border-style: solid; border-color: transparent #19A15F transparent transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .vhb-table--render-default .vhb-body--column.col--dirty { position: relative; } .vhb-table--render-default .vhb-body--column.col--dirty:before { content: ""; top: -5px; left: -5px; position: absolute; border-width: 5px; border-style: solid; border-color: transparent #f56c6c transparent transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived { -webkit-box-shadow: inset 0px 0px 0px 2px #409eff; box-shadow: inset 0px 0px 0px 2px #409eff; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived.col--valid-error { -webkit-box-shadow: inset 0px 0px 0px 2px #f56c6c; box-shadow: inset 0px 0px 0px 2px #f56c6c; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-default-input, .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-default-textarea { border: 0; padding: 0; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-default-input { height: 22px; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-input .vhb-input--inner { border: 0; padding-left: 0; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-textarea { height: 21px; } .vhb-table--render-default.vhb-editable.cell--highlight .vhb-body--column.col--actived .vhb-cell .vhb-textarea .vhb-textarea--inner { border: 0; } .vhb-table--render-default.vhb-editable .vhb-body--column { padding: 0; } .vhb-table--render-default.vhb-editable .vhb-body--column.col--actived { padding: 0; }