|
@@ -10,7 +10,7 @@
|
|
|
<v-data-table
|
|
|
ref="table"
|
|
|
v-model="selected"
|
|
|
- :class="`elevation-${elevation} tableColor ${noRadius ? 'noRadius' : ''}`"
|
|
|
+ :class="`elevation-${elevation} ${showFixedLastItem ? 'fixed-last-item' : ''}`"
|
|
|
:headers="headers"
|
|
|
:items="items"
|
|
|
:item-key="itemKey"
|
|
@@ -115,10 +115,6 @@ const props = defineProps({
|
|
|
type: [String, Number],
|
|
|
default: ''
|
|
|
},
|
|
|
- noRadius: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
noDataText: {
|
|
|
type: String,
|
|
|
default: '暂无数据'
|
|
@@ -134,6 +130,11 @@ const props = defineProps({
|
|
|
selectStrategy: {
|
|
|
type: String,
|
|
|
default: 'single'
|
|
|
+ },
|
|
|
+ // 是否将最后一项固定在表格右侧
|
|
|
+ showFixedLastItem: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
}
|
|
|
})
|
|
|
watch(() => props.modelValue, (val) => {
|
|
@@ -200,48 +201,52 @@ const handleSelect = (e) => {
|
|
|
:deep(.v-table.v-table--hover > .v-table__wrapper > table > tbody > tr > td) {
|
|
|
white-space: nowrap !important;
|
|
|
}
|
|
|
-
|
|
|
:deep {
|
|
|
- .v-table__wrapper {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::-webkit-scrollbar:horizontal {
|
|
|
- height: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- &:not(:hover)::-webkit-scrollbar:horizontal {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ table > thead > tr > th:last-child {
|
|
|
+ border-bottom: 1px solid #e0e0e0 !important;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .v-table__wrapper:not(:hover),
|
|
|
- .v-table__wrapper::-webkit-scrollbar-thumb:horizontal {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
+ .fixed-last-item {
|
|
|
+ :deep {
|
|
|
+ .v-table__wrapper {
|
|
|
+ position: relative;
|
|
|
+ &::-webkit-scrollbar:horizontal {
|
|
|
+ height: 8px;
|
|
|
+ }
|
|
|
+ &:not(:hover)::-webkit-scrollbar:horizontal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- table > tbody > tr > td:last-child,
|
|
|
- table > thead > tr > th:last-child {
|
|
|
- position: sticky !important;
|
|
|
- position: -webkit-sticky !important;
|
|
|
- right: 0;
|
|
|
- z-index: 1;
|
|
|
- background: white !important;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
+ .v-table__wrapper:not(:hover),
|
|
|
+ .v-table__wrapper::-webkit-scrollbar-thumb:horizontal {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
|
|
|
- .v-table__wrapper.hasScroll {
|
|
|
table > tbody > tr > td:last-child,
|
|
|
table > thead > tr > th:last-child {
|
|
|
- border-left: 1px solid #e0e0e0 !important;
|
|
|
- // box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .35) !important;
|
|
|
+ position: sticky !important;
|
|
|
+ position: -webkit-sticky !important;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
+ background: white !important;
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
|
|
|
|
- table > thead > tr > th:last-child {
|
|
|
- z-index: 10 !important;
|
|
|
- // box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .35) !important;
|
|
|
- // border-bottom: 1px solid #e0e0e0 !important;
|
|
|
+ .v-table__wrapper.hasScroll {
|
|
|
+ table > tbody > tr > td:last-child,
|
|
|
+ table > thead > tr > th:last-child {
|
|
|
+ border-left: 1px solid #e0e0e0 !important;
|
|
|
+ // box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .35) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ table > thead > tr > th:last-child {
|
|
|
+ z-index: 10 !important;
|
|
|
+ // box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .35) !important;
|
|
|
+ border-bottom: 1px solid #e0e0e0 !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|