mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(data-table): there is no right border of non-last td

Browse Source
This commit is contained in:
07akioni 2021-03-25 18:51:01 +08:00
parent 9de4112ed3
commit 8ab902fd66
7 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.en-US.md
View File

@ -1,6 +1,12 @@
# CHANGELOG
## Pending
## 2.1.3
### Fixes
- Fix `n-data-table` has no right border of non-last td.
## 2.1.2
### Feats

8
CHANGELOG.zh-CN.md
View File

@ -1,6 +1,12 @@
# CHANGELOG
## Pending
## 2.1.3
### Fixes
- 修正 `n-data-table` 对于不是最后一个的 td 没有右侧边框
## 2.1.2
### Feats

1
src/data-table/demos/enUS/merge-cell.demo.md
View File

@ -61,6 +61,7 @@ const createColumns = ({ sendMail }) => {
title: 'Action',
key: 'actions',
width: '20%',
rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1),
render (row) {
return h(
NButton,

1
src/data-table/demos/zhCN/merge-cell.demo.md
View File

@ -63,6 +63,7 @@ const createColumns = ({ sendMail }) => {
title: 'Action',
key: 'actions',
width: '20%',
rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1),
render (row) {
return h(
NButton,

3
src/data-table/src/DataTable.tsx
View File

@ -190,6 +190,9 @@ export default defineComponent({
const { mergedBordered } = useConfig(props)
const mergedBottomBorderedRef = computed(() => {
const { bottomBordered } = props
// do not add bottom bordered class if bordered is true
// since border is displayed on wrapper
if (mergedBordered.value) return false
if (bottomBordered !== undefined) return bottomBordered
return true
})

15
src/data-table/src/TableParts/Body.tsx
View File

@ -66,15 +66,18 @@ export default defineComponent({
{{
default: () => {
const cordToPass: Record<number, number[]> = {}
const { cols, paginatedData } = NDataTable
const { length: colCount } = cols
const { length: rowCount } = paginatedData
return (
<table ref="body" class="n-data-table-table">
<colgroup>
{NDataTable.cols.map((col) => (
{cols.map((col) => (
<col key={col.key} style={col.style}></col>
))}
</colgroup>
<tbody ref="tbody" class="n-data-table-tbody">
{NDataTable.paginatedData.map((tmNode, rowIndex) => {
{paginatedData.map((tmNode, rowIndex) => {
const { rawNode: row } = tmNode
const { handleCheckboxUpdateChecked } = this
const {
@ -115,6 +118,10 @@ export default defineComponent({
const mergedRowSpan = rowSpan
? rowSpan(row, rowIndex)
: 1
const isLastCol =
colIndex + mergedColSpan === colCount
const isLastRow =
rowIndex + mergedRowSpan === rowCount
if (mergedColSpan > 1 || mergedRowSpan > 1) {
for (
let i = rowIndex;
@ -163,7 +170,9 @@ export default defineComponent({
'n-data-table-td--shadow-before':
rightActiveFixedColKey === key,
'n-data-table-td--selection':
column.type === 'selection'
column.type === 'selection',
'n-data-table-td--last-col': isLastCol,
'n-data-table-td--last-row': isLastRow
}
]}
>

24
src/data-table/src/styles/index.cssr.ts
View File

@ -98,7 +98,7 @@ export default c([
cB('data-table-td', {
borderRight: '1px solid var(--border-color)'
}, [
c('&:last-child', {
cM('last-col', {
borderRight: '0 solid var(--border-color)'
})
])
@ -114,8 +114,8 @@ export default c([
}, [
cB('data-table-table', [
cB('data-table-tr', [
c('&:last-child', [
cB('data-table-td', {
cB('data-table-td', [
cM('last-row', {
borderBottom: '0 solid var(--border-color)'
})
])
@ -137,8 +137,8 @@ export default c([
cM('bottom-bordered', [
cB('data-table-table', [
cB('data-table-tr', [
c('&:last-child', [
cB('data-table-td', {
cB('data-table-td', [
cM('last-row', {
borderBottom: '1px solid var(--border-color)'
})
])
@ -165,10 +165,12 @@ export default c([
backgroundClip: 'padding-box',
transition: 'background-color .3s var(--bezier)'
}, [
c('&:last-child', [
cB('data-table-td', {
cB('data-table-td', [
cM('last-row', {
borderBottom: '0 solid var(--border-color)'
}, [
// make sure there is no overlap between bottom border and
// fixed column box shadow
c('&::after', {
bottom: '0 !important'
}),
@ -394,14 +396,14 @@ function createStyleInsideModal (): CNode {
cB('data-table-th', {
borderRight: '1px solid var(--border-color-modal)'
}, [
c('&:last-child', {
cM('last', {
borderRight: '0 solid var(--border-color-modal)'
})
]),
cB('data-table-td', {
borderRight: '1px solid var(--border-color-modal)'
}, [
c('&:last-child', {
cM('last-col', {
borderRight: '0 solid var(--border-color-modal)'
})
])
@ -414,8 +416,8 @@ function createStyleInsideModal (): CNode {
}, [
cB('data-table-table', [
cB('data-table-tr', [
c('&:last-child', [
cB('data-table-td', {
cB('data-table-td', [
cM('last-row', {
borderBottom: '0 solid var(--border-color-modal)'
})
])