반응형
고정 헤더를 사용하여 Vue b-테이블을 스크롤하는 방법
나는 a를 가지고 있다.b-table데이터베이스로부터 현재 많은 데이터를 표시하는 페이지의 요소.현재 페이지 표시되지만 피드백은 모든 정보를 단일 스크롤 보기로 표시하는 것을 선호한다는 것을 나타낸다.할 수 있지만, 문제는 만약 내가 포텐셜을div전체 테이블을 스크롤하려면 열 머리글도 스크롤하십시오.기둥 헤더를 제자리에 둔 채 테이블 바디만 스크롤할 수 있는 방법을 찾아야 하는데, 뒤에 있는 Javascript 연결 뭉치가 있는 완전히 분리된 헤더와 본체가 있는 것을 고정하는 대신 원소 자체의 범위 내에서 할 수 있는 방법을 찾고 싶다.
bootstrap-vue 테이블 구성 요소의 구성 요소 참조 아래, 라고 하는 속성이 있다고 되어 있다.tbody-class그것은 tbody에 대한 사용자 지정 클래스를 지정하는 방법인 것 같다(미치게도 충분하다).그러나 이 페이지에는 사용 방법에 대한 어떤 표시도 나와 있지 않으며, 나의 실험은 어떤 결과도 만들어내지 못했다.
<b-table
tbody-class="my-class" <- Applies prop to table but not to tbody
:tbody-class="my-class" <- Seemingly ignored entirely
>
이런 문제가 이 이슈 실에서 해결된 것처럼 들리지만, 어떻게 해결됐는지는 자세히 설명되지 않는다.이 보고서는 기능이 "다음 업데이트"에 추가되었다고 언급하지만, 설명 이후 공개된 버전의 패치 노트나 설명서 모두 그러한 추가사항을 전혀 언급하지 않는다(앞 단락에서 언급한 속성을 의미하지 않는 한).스타일을 우회적으로 적용하기 위해 CSS 셀렉터를 사용하는 것에 대해 이야기하지만, 나 역시 그 스타일을 제대로 적용할 수 없었다.(다음 예에서,tbody크롬 검사기는 적용된 스타일을 가지고 있지 않다.
.table.my-table > tbody {
height: 100px;
}
내가 사용하고 있는 Vue의 버전은 2.2.6이다.
v2.0.0-rc.28 이후 고정 헤더를 지원하기 위해 선택적 소품이 추가되었다.
new Vue({
el: '#app',
data: {
items: [
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' },
{ heading1: 'table cell', heading2: 'table cell', heading3: 'table cell' }
],
}
});<html>
<header>
<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.0/dist/bootstrap-vue.min.css" />
</header>
<body>
<div id="app">
<b-table sticky-header :items="items" head-variant="light"></b-table>
</div>
</body>
</html>기둥 헤더를 그대로 두고 테이블 본체만 스크롤할 수 있는 방법을 찾아야 하는데, 뒤에 있는 Javascript 연결 뭉치를 가지고 완전히 분리된 헤더와 본체가 있는 것을 고정하는 대신 원소 자체의 범위 내에서 할 수 있는 방법을 찾고 싶다.
어떻게 작동하는지 보기 위해 예시 저장소를 만들었어.
같은 일을 성취할 수 있는 다른 방법들도 아마 있겠지만, 이것이 내가 한 일이다.
<!-- wrap table in container with class. -->
<b-container fluid class="table-container">
<b-table
:items="items"
:fields="fields"
caption-top
>
</b-table>
</b-container>
그리고 여기 스크롤바가 숨겨진 CSS가 있다.
.table-container {
height: calc(100vh - 450px);
}
.table-container table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
.table-container table thead {
flex: 0 0 auto;
width: 100%;
}
.table-container table tbody {
flex: 1 1 auto;
display: block;
width: 100%;
overflow-y: auto;
}
.table-container table tbody tr {
width: 100%;
}
.table-container table thead, .table-container table tbody tr {
display: table;
table-layout: fixed;
}
.table-container table {
border-collapse: collapse;
}
.table-container table td, .table-container table th {
padding: 0.4em;
}
.table-container table th {
border: 1px solid black;
font-size: 0.7vw;
}
.table-container table td {
border: 1px solid #e7e1e1;
font-size: 0.85em;
/* necessary to set for proper "showing row x of y" calculations if infinate scoll */
white-space: nowrap;
text-align: center;
padding: 10px 5px;
white-space: nowrap;
text-overflow: ellipsis;
}
.table-container table thead {
border: 2px solid #0F0FA3;
}
.table-container th {
background-color: #0F0FA3;
color: #b5aba4;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none !important;
-ms-user-select: none;
user-select: none;
}
.table-container table tbody td {
padding: 8px;
cursor: pointer;
}
.table-container table tbody tr:hover {
background-color: rgba(168, 168, 239, .5);
}
.table-container table thead td {
padding: 10px 5px;
}
.table-container tr:nth-child(even) {
background-color: rgba(168, 168, 239, 1);
}
/* START Adjustments for width and scrollbar hidden */
.table-container th.table-action, .table-container td.table-action {
width: 5.8vw;
}
.table-container table thead {
width: calc(100% - 1px);
}
.table-container table tbody::-webkit-scrollbar {
width: 1px;
}
.table-container table tbody::-webkit-scrollbar {
width: 1px;
}
.table-container table tbody::-webkit-scrollbar-thumb {
width: 1px;
}
/* END Adjustments for width and scrollbar */
업데이트, 헤더를 고정하지만 매우 제한적인(ref):
이 일을 할 수 있는 몇 가지 방법이 있어크로스 브라우저가 항상 보장되는 것은 아니다.
예를 들어, 내 테이블-테이블-테이블을 만들다.
table.my-table-scroll,
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot,
table.my-table-scroll > tbody > tr,
table.my-table-scroll > thead > tr {
width: 100%;
display: block
}
table.my-table-scroll > thead,
table.my-table-scroll > tbody,
table.my-table-scroll > tfoot {
display: block;
width: 100%;
overflow-y: scroll;
}
table.my-table-scroll > thead,
table.my-table-scroll > tfoot {
height: auto;
}
/* these last two rules you will need to tweak on an as needed basis */
table.my-table-scroll > tbody {
/* set max height for tbody before it scrolls */
max-height: 200px;
}
table.my-table-scroll > thead > tr > th,
table.my-table-scroll > thead > tr > td,
table.my-table-scroll > tbody > tr > th,
table.my-table-scroll > tbody > tr > td,
table.my-table-scroll > tfoot > tr > th,
table.my-table-scroll > tfoot > tr > td {
display: inline-block;
/* you need to explicitly specify the width of the table cells */
/* either equal, or specify individual widths based on col index. */
/* Here, we assume you have 4 columns of data */
width: 25%;
}
/*
could use sibling selectors to select specific columns for widths:
td + td (second column)
td + td + td (3rd column, etc)
*/
그리고 나서 수업을 b-테이블 위에 올려놓아라.
반응형
'IT이야기' 카테고리의 다른 글
| 웹 팩 별칭의 Vue 형식 오류, 경로를 찾을 수 없음 (0) | 2022.05.24 |
|---|---|
| Vue.js는 v-for 루프 내부 참조 (0) | 2022.05.24 |
| Vue의 하위 구성 요소에서 입력 값 가져오기 (0) | 2022.05.24 |
| 특정 그리드 크기에 대한 클래스 추가 설정 (0) | 2022.05.24 |
| vue.js 쿼리 위치 변경 탐색복제 (0) | 2022.05.24 |