UNPKG

vxe-table

Version:

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

204 lines (185 loc) 5.95 kB
@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; }