From 8ab902fd66af24f0f301f362e19baed0f40e655d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 25 Mar 2021 18:51:01 +0800 Subject: [PATCH] fix(data-table): there is no right border of non-last td --- CHANGELOG.en-US.md | 8 ++++++- CHANGELOG.zh-CN.md | 8 ++++++- src/data-table/demos/enUS/merge-cell.demo.md | 1 + src/data-table/demos/zhCN/merge-cell.demo.md | 1 + src/data-table/src/DataTable.tsx | 3 +++ src/data-table/src/TableParts/Body.tsx | 15 +++++++++--- src/data-table/src/styles/index.cssr.ts | 24 +++++++++++--------- 7 files changed, 44 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 3b8800b5a..826a24221 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -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 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 75818a02d..dd34893e0 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,6 +1,12 @@ # CHANGELOG -## Pending +## 2.1.3 + +### Fixes + +- 修正 `n-data-table` 对于不是最后一个的 td 没有右侧边框 + +## 2.1.2 ### Feats diff --git a/src/data-table/demos/enUS/merge-cell.demo.md b/src/data-table/demos/enUS/merge-cell.demo.md index 63437c50f..81b36583a 100644 --- a/src/data-table/demos/enUS/merge-cell.demo.md +++ b/src/data-table/demos/enUS/merge-cell.demo.md @@ -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, diff --git a/src/data-table/demos/zhCN/merge-cell.demo.md b/src/data-table/demos/zhCN/merge-cell.demo.md index a0f771193..7396ff200 100644 --- a/src/data-table/demos/zhCN/merge-cell.demo.md +++ b/src/data-table/demos/zhCN/merge-cell.demo.md @@ -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, diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx index 2a0e0994a..67f2e2040 100644 --- a/src/data-table/src/DataTable.tsx +++ b/src/data-table/src/DataTable.tsx @@ -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 }) diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx index d37c1e495..83ec69dc9 100644 --- a/src/data-table/src/TableParts/Body.tsx +++ b/src/data-table/src/TableParts/Body.tsx @@ -66,15 +66,18 @@ export default defineComponent({ {{ default: () => { const cordToPass: Record = {} + const { cols, paginatedData } = NDataTable + const { length: colCount } = cols + const { length: rowCount } = paginatedData return ( - {NDataTable.cols.map((col) => ( + {cols.map((col) => ( ))} - {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 } ]} > diff --git a/src/data-table/src/styles/index.cssr.ts b/src/data-table/src/styles/index.cssr.ts index 78b0d6bb5..21a2e9cc1 100644 --- a/src/data-table/src/styles/index.cssr.ts +++ b/src/data-table/src/styles/index.cssr.ts @@ -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)' }) ])