x-data-grid
Version:
Vue表格组件,支持搜索、排序、分页、固定列、调整列宽
1 lines • 1.95 kB
CSS
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}.x-data-grid td,.x-data-grid th{padding:6px 10px}.x-data-grid{text-align:left;border:1px solid #d8dadc}.x-data-grid table{border-collapse:separate;border-spacing:0;empty-cells:show;table-layout:fixed}.x-data-grid table th{position:sticky;top:0;z-index:3;background-color:#f8f8f9;border-right:1px solid #d8dadc}.x-data-grid table th:last-child{border-right:none}.x-data-grid table td{background-color:#fff}.x-data-grid table td,.x-data-grid table th{padding:4px 6px;border-right:1px solid #d8dadc;border-bottom:1px solid #d8dadc}.x-data-grid table tr.zebra-pattern>td{background-color:#f3f6fa}.x-data-grid table tr.active>td{background-color:#bad5ff}.x-data-grid ::-webkit-scrollbar{width:8px;height:8px}.x-data-grid ::-webkit-scrollbar-thumb{border-radius:10px;box-shadow:none;background:#ccc9d4}.x-data-grid ::-webkit-scrollbar-track{box-shadow:none;border-radius:10px;background:#f8f8f8}.x-data-grid .x-nav-bt{margin:0 5px;border:none}.x-data-grid .x-nav-bt:focus{outline:none}.x-data-grid .x-table-title{background:#f8f8f9;padding:5px 10px;border-bottom:1px solid #d8dadc}.x-data-grid .x-table-title select{background:#fff;font-size:16px;text-align:center;border:none;outline:none;height:24px;line-height:24px;background:#f8f8f9}.x-data-grid .x-table-title option{color:#000;line-height:20px}.x-data-grid .x-table-title option:hover{background:#ebccd1}.x-data-grid .x-table-title input{outline-style:none;border:1px solid #ccc;border-radius:3px;font-size:16px}.x-data-grid [tooltip]:before{position:absolute;content:attr(tooltip);white-space:pre-line;z-index:20;opacity:0;pointer-events:none;margin-left:15px;margin-top:10px;border:1px solid #ccc;border-radius:5px;padding:5px;font-size:14px;color:#444;background:#fff}.x-data-grid [tooltip]:hover:before{opacity:1}