mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
fix(table): theme prop & fix column shadow overlap
This commit is contained in:
07akioni
parent
1269d9b904
commit
faebaa8114
@ -32,6 +32,7 @@ ajaxUsage
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|`null`||
|
||||
|data|`Array<object>`|`[]`|Data to display|
|
||||
|columns|`Array<Column>`||Columns to display, **required**|
|
||||
|max-height|`number \| string`|`null`|The max-height of the table. If content height is larger than it, the header will be fixed at top|
|
||||
|
||||
@ -32,6 +32,7 @@ ajaxUsage
|
||||
## Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|`null`||
|
||||
|data|`Array<object>`|`[]`|需要展示的数据|
|
||||
|columns|`Array<Column>`||需要展示的列，**必需**|
|
||||
|max-height|`number \| string`|`null`|表格的最大高度，如果内容高度高于它，那么表头将固定|
|
||||
|
||||
@ -18,6 +18,7 @@ You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`.
|
||||
### Table Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|`null`||
|
||||
|bordered|`boolean`|`true`||
|
||||
|single-line|`boolean`|`true`||
|
||||
|single-column|`boolean`|`false`||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 尺寸
|
||||
# Size
|
||||
```html
|
||||
<<n-table :bordered="false" :single-line="false" size="small">
|
||||
<n-table :bordered="false" :single-line="false" size="small">
|
||||
<n-thead>
|
||||
<n-tr>
|
||||
<n-th>Abandon</n-th>
|
||||
|
||||
@ -18,6 +18,7 @@ single-line
|
||||
### Table Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|theme|`'light' \| 'dark'`|`null`||
|
||||
|bordered|`boolean`|`true`||
|
||||
|single-line|`boolean`|`true`||
|
||||
|single-column|`boolean`|`false`||
|
||||
|
||||
@ -60,10 +60,11 @@ export default {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
|
||||
transition: opacity .3s .15s ease-in;
|
||||
}
|
||||
|
||||
.naive-doc-title:hover .edit-button {
|
||||
opacity: 1;
|
||||
transition: opacity .3s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,10 @@
|
||||
[`n-data-table--${size}-size`]: true
|
||||
}"
|
||||
>
|
||||
<n-spin :spinning="loading">
|
||||
<n-spin
|
||||
:spinning="loading"
|
||||
:theme="syntheticTheme"
|
||||
>
|
||||
<div
|
||||
class="n-data-table-wrapper"
|
||||
>
|
||||
@ -34,7 +37,7 @@
|
||||
}"
|
||||
:style="bodyStyle"
|
||||
>
|
||||
<n-empty />
|
||||
<n-empty :theme="syntheticTheme" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -42,6 +45,7 @@
|
||||
class="n-data-table__pagination"
|
||||
>
|
||||
<n-pagination
|
||||
:theme="syntheticTheme"
|
||||
:page="syntheticPagination.page"
|
||||
:page-count="syntheticPagination.pageCount"
|
||||
:page-slot="pagination.pageSlot"
|
||||
|
||||
@ -8,7 +8,9 @@
|
||||
>
|
||||
<n-popover
|
||||
trigger="click"
|
||||
:theme="NDataTable.syntheticTheme"
|
||||
:controller="controller"
|
||||
:overlay-style="{ padding: 0 }"
|
||||
@show="popoverVisible = true"
|
||||
@hide="popoverVisible = false"
|
||||
>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="n-data-table-filter-menu">
|
||||
<n-checkbox-group
|
||||
v-if="multiple"
|
||||
:theme="theme"
|
||||
:value="cachedValue"
|
||||
class="n-data-table-filter-menu__group"
|
||||
@change="handleChange"
|
||||
@ -16,6 +17,7 @@
|
||||
</n-checkbox-group>
|
||||
<n-radio-group
|
||||
v-else
|
||||
:theme="theme"
|
||||
:name="radioGroupName"
|
||||
class="n-data-table-filter-menu__group"
|
||||
:value="cachedValue && cachedValue[0]"
|
||||
@ -29,12 +31,23 @@
|
||||
{{ option.label }}
|
||||
</n-radio>
|
||||
</n-radio-group>
|
||||
<n-divider />
|
||||
<n-divider :theme="theme" />
|
||||
<div class="n-data-table-filter-menu__action">
|
||||
<n-button size="tiny" round @click="handleCancelClick">
|
||||
<n-button
|
||||
size="tiny"
|
||||
round
|
||||
:theme="theme"
|
||||
@click="handleCancelClick"
|
||||
>
|
||||
{{ NDataTable.localeNamespace.clear }}
|
||||
</n-button>
|
||||
<n-button type="primary" size="tiny" round @click="handleConfirmClick">
|
||||
<n-button
|
||||
:theme="theme"
|
||||
type="primary"
|
||||
size="tiny"
|
||||
round
|
||||
@click="handleConfirmClick"
|
||||
>
|
||||
{{ NDataTable.localeNamespace.confirm }}
|
||||
</n-button>
|
||||
</div>
|
||||
@ -97,6 +110,11 @@ export default {
|
||||
cachedValue: this.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
theme () {
|
||||
return this.NDataTable.syntheticTheme
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value) {
|
||||
if (this.multiple) {
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<n-scrollbar
|
||||
ref="scrollbar"
|
||||
class="n-data-table-base-table-body"
|
||||
:theme="NDataTable.syntheticTheme"
|
||||
:style="style"
|
||||
:content-style="{
|
||||
minWidth: scrollX
|
||||
|
||||
@ -94,6 +94,16 @@
|
||||
box-sizing: border-box;
|
||||
transition: background-color 0.3s $--n-ease-in-out-cubic-bezier;
|
||||
background-clip: padding-box;
|
||||
&:last-child {
|
||||
@include b(data-table-td) {
|
||||
&::after {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
&::before {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(data-table-td) {
|
||||
@ -238,8 +248,16 @@
|
||||
@include m(single-column) {
|
||||
@include b(data-table-wrapper) {
|
||||
@include b(data-table-table){
|
||||
@include b(data-table-td) {
|
||||
border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important;
|
||||
@include b(data-table-tr) {
|
||||
@include b(data-table-td) {
|
||||
border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important;
|
||||
&::after {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
&::before {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user