docs(data-table): merge-cell ts demo

Signed-off-by: Artea <[email protected]>
tusen-ai · Jan 5, 2025 · 19a2885 · 19a2885
1 parent 214ec5b
commit 19a2885
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 38 deletions.
diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -26,7 +26,7 @@ empty.vue
 border.vue
 size.vue
 row-props.vue
-merge-cell
+merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
 multiple-sorter

diff --git a/src/data-table/demos/enUS/merge-cell.demo.md → ...data-table/demos/enUS/merge-cell.demo.vue b/src/data-table/demos/enUS/merge-cell.demo.md → ...data-table/demos/enUS/merge-cell.demo.vue
@@ -1,24 +1,35 @@
+<markdown>
 # Merge cell
 
 Set colspan and rowspan by setting `colSpan` and `rowSpan` of column object. Set colspan in header by setting `titleColSpan` of column object.
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  :single-line="false"
-/>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-function createColumns({ sendMail }) {
+interface RawData {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+interface SendMail {
+  (rowData: RawData): void
+}
+
+function createColumns({
+  sendMail
+}: {
+  sendMail: SendMail
+}): DataTableColumns<RawData> {
   return [
     {
       title: 'Name',
+      titleColSpan: 2,
       key: 'name',
       rowSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1),
       colSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1)
@@ -35,6 +46,7 @@ function createColumns({ sendMail }) {
     {
       title: 'Tags',
       key: 'tags',
+      titleColSpan: 2,
       render(row) {
         const tags = row.tags.map((tagKey) => {
           return h(
@@ -72,7 +84,7 @@ function createColumns({ sendMail }) {
   ]
 }
 
-function createData() {
+function createData(): RawData[] {
   return [
     {
       key: 0,
@@ -101,17 +113,25 @@ function createData() {
 export default defineComponent({
   setup() {
     const message = useMessage()
+    function sendMail(rowData: RawData) {
+      message.info(`send mail to ${rowData.name}`)
+    }
     return {
       data: createData(),
-      columns: createColumns({
-        sendMail(rowData) {
-          message.info(`send mail to ${rowData.name}`)
-        }
-      }),
+      columns: createColumns({ sendMail }),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :single-line="false"
+  />
+</template>
diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -28,7 +28,7 @@ empty.vue
 border.vue
 size.vue
 row-props.vue
-merge-cell
+merge-cell.vue
 filter-and-sorter
 pagination-behavior-on-filter.vue
 multiple-sorter

diff --git a/src/data-table/demos/zhCN/merge-cell.demo.md → ...data-table/demos/zhCN/merge-cell.demo.vue b/src/data-table/demos/zhCN/merge-cell.demo.md → ...data-table/demos/zhCN/merge-cell.demo.vue
@@ -1,21 +1,31 @@
+<markdown>
 # 合并单元格
 
 设定列的 `colSpan` 和 `rowSpan` 来控制单元格的 `colspan` 和 `rowspan`。设定列的 `titleColSpan` 控制表头的 colspan。
+</markdown>
 
-```html
-<n-data-table
-  :columns="columns"
-  :data="data"
-  :pagination="pagination"
-  :single-line="false"
-/>
-```
-
-```js
+<script lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { NButton, NTag, useMessage } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
-function createColumns({ sendMail }) {
+interface RawData {
+  key: number
+  name: string
+  age: number
+  address: string
+  tags: string[]
+}
+
+interface SendMail {
+  (rowData: RawData): void
+}
+
+function createColumns({
+  sendMail
+}: {
+  sendMail: SendMail
+}): DataTableColumns<RawData> {
   return [
     {
       title: 'Name',
@@ -74,7 +84,7 @@ function createColumns({ sendMail }) {
   ]
 }
 
-function createData() {
+function createData(): RawData[] {
   return [
     {
       key: 0,
@@ -103,17 +113,25 @@ function createData() {
 export default defineComponent({
   setup() {
     const message = useMessage()
+    function sendMail(rowData: RawData) {
+      message.info(`send mail to ${rowData.name}`)
+    }
     return {
       data: createData(),
-      columns: createColumns({
-        sendMail(rowData) {
-          message.info(`send mail to ${rowData.name}`)
-        }
-      }),
+      columns: createColumns({ sendMail }),
       pagination: {
         pageSize: 10
       }
     }
   }
 })
-```
+</script>
+
+<template>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :single-line="false"
+  />
+</template>