feat(data-table): bottom-bordered prop

src/data-table/demos/enUS/index.demo-entry.md

@@ -34,6 +34,7 @@ custom-filter-menu
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | bordered | `boolean` | `true` |  |
+| bottom-bordered | `boolean` | `true` |  |
 | checked-row-keys | `Array<string \| number>` | `undefined` | The keys of checked rows. |
 | columns | `Array<Column>` | required | Columns to display. |
 | data | `Array<Object>` | `[]` | Data to display. |

src/data-table/demos/zhCN/index.demo-entry.md

@@ -34,6 +34,7 @@ custom-filter-menu
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | bordered | `boolean` | `true` |  |
+| bottom-bordered | `boolean` | `true` |  |
 | checked-row-keys | `Array<string \| number>` | `undefined` | 被选中的列的 key |
 | columns | `Array<Column>` |  | 需要展示的列，**必需** |
 | data | `Array<Object>` | `[]` | 需要展示的数据 |

src/data-table/src/DataTable.tsx

@@ -64,6 +64,10 @@ export const dataTableProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  bottomBordered: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: undefined
+  },
   scrollX: [Number, String] as PropType<string | number>,
   defaultCheckedRowKeys: {
     type: Array as PropType<RowKey[]>,
@@ -184,6 +188,11 @@ export default defineComponent({
   props: dataTableProps,
   setup (props) {
     const { mergedBordered } = useConfig(props)
+    const mergedBottomBorderedRef = computed(() => {
+      const { bottomBordered } = props
+      if (bottomBordered !== undefined) return bottomBordered
+      return true
+    })
     const themeRef = useTheme(
       'DataTable',
       'DataTable',
@@ -295,6 +304,7 @@ export default defineComponent({
       mergedTheme: themeRef,
       paginatedData: paginatedDataRef,
       mergedBordered,
+      mergedBottomBordered: mergedBottomBorderedRef,
       mergedPagination,
       ...exposedMethods,
       cssVars: computed(() => {
@@ -365,6 +375,7 @@ export default defineComponent({
           'n-data-table',
           {
             'n-data-table--bordered': this.mergedBordered,
+            'n-data-table--bottom-bordered': this.mergedBottomBordered,
             'n-data-table--single-line': this.singleLine,
             'n-data-table--single-column': this.singleColumn
           }

src/data-table/src/styles/index.cssr.ts

@@ -91,14 +91,14 @@ export default c([
           cB('data-table-th', {
             borderRight: '1px solid var(--border-color)'
           }, [
-            cB('&:last-child', {
+            c('&:last-child', {
               borderRight: '0 solid var(--border-color)'
             })
           ]),
           cB('data-table-td', {
             borderRight: '1px solid var(--border-color)'
           }, [
-            cB('&:last-child', {
+            c('&:last-child', {
               borderRight: '0 solid var(--border-color)'
             })
           ])
@@ -134,6 +134,17 @@ export default c([
         cB('data-table-td', [c('&::after, &::before', { transition: 'none' })])
       ])
     ]),
+    cM('bottom-bordered', [
+      cB('data-table-table', [
+        cB('data-table-tr', [
+          c('&:last-child', [
+            cB('data-table-td', {
+              borderBottom: '1px solid var(--border-color)'
+            })
+          ])
+        ])
+      ])
+    ]),
     cB('data-table-table', `
       font-variant-numeric: tabular-nums;
       width: 100%;
@@ -155,7 +166,9 @@ export default c([
         transition: 'background-color .3s var(--bezier)'
       }, [
         c('&:last-child', [
-          cB('data-table-td', [
+          cB('data-table-td', {
+            borderBottom: '0 solid var(--border-color)'
+          }, [
             c('&::after', {
               bottom: '0 !important'
             }),

src/data-table/styles/_common.ts

@@ -1,8 +1,8 @@
 export default {
-  thPaddingSmall: '6px',
+  thPaddingSmall: '8px',
   thPaddingMedium: '12px',
   thPaddingLarge: '12px',
-  tdPaddingSmall: '6px',
+  tdPaddingSmall: '8px',
   tdPaddingMedium: '12px',
   tdPaddingLarge: '12px',
   filterSize: '14px',

vue3.md

@@ -442,7 +442,7 @@
   - [x] input auto size
   - [x] data table custom render sorter
   - [x] upload retry
-  - [ ] table bottom-bordered
+  - [x] table bottom-bordered
   - [x] data table filter menu
 
 ## Build