diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index 679d3396..3fc077b7 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -31,7 +31,8 @@ jobs:
     steps:
       - name: Print Previous Job Output
         run: |
-          echo "Previous job output: ${{ needs.release.outputs }}"
+          echo "Previous job output: "
+          echo "${{ needs.release.outputs }}" | jq .
 
   publish:
     runs-on: ubuntu-latest
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index b46b1737..a4393c76 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -52,6 +52,7 @@ export default defineConfig({
           { text: 'Image 图片', link: '/components/image' },
           { text: 'Shadow 阴影', link: '/components/shadow' },
           { text: 'Table 表格', link: '/components/table' },
+          { text: 'Checkbox 复选框', link: '/components/checkbox' },
         ],
       },
     ],
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 5e0d931b..4ecac9ef 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -19,6 +19,7 @@ import CodePreview from '../../../src/app_components/CodePreview.vue';
 import '../../../style/message';
 import '../../../style/shadow';
 import '../../../style/table';
+import '../../../style/checkbox';
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
new file mode 100644
index 00000000..3eac14f5
--- /dev/null
+++ b/docs/components/checkbox.md
@@ -0,0 +1,212 @@
+# Checkbox 复选框
+
+在一组备选项中进行多选。适用提醒用户勾选场景，突出多选框选项，可以有效增加用户识别度。
+
+## 演示
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { Checkbox, CheckboxGroup } from '../../src'
+
+  const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']]
+
+  const checkedCities = ref(['CD', 'SZ'])
+  const checkAll = ref(false)
+  const isIndeterminate = ref(true)
+
+  function handleCheckAllChange(val: boolean) {
+    checkedCities.value = val ? cities.map(c => c[0]) : []
+    isIndeterminate.value = false
+  }
+  function handleGroupChange(val: string[]) {
+    const checkedCount = val.length
+    checkAll.value = checkedCount === cities.length
+    isIndeterminate.value = checkedCount < cities.length
+  }
+</script>
+
+### 基础用法
+
+单独使用可以表示两种状态之间的切换；在 `nt-checkbox` 元素中定义 `v-model` 绑定变量，单一的 `checkbox` 中，默认绑定变量的值会是 `Boolean`，选中为 `true`。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-checkbox label="Option1"></nt-checkbox>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 禁用状态
+
+多选框不可用状态, 设置 `disabled` 属性即可。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <nt-checkbox label="Option1" disabled></nt-checkbox>
+  </textarea>
+  </CodePreview>
+</ClientOnly>
+
+### 选项框组
+
+使用 `nt-checkbox-group` 元素来包裹 `nt-checkbox` 元素，实现复选框组。使用时需要给 `nt-checkbox` 传递 `value` 属性。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+  </script>
+  <template>
+    <nt-checkbox-group v-model="checkedCities">
+      <nt-checkbox v-for="city in cities" :key="city[0]" :value="city[0]" :label="city[1]"></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <CheckboxGroup v-model="checkedCities">
+      <Checkbox v-for="city in cities" :key="city[0]" :value="city[0]" :label="city[1]"></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 中间状态
+
+设置 `indeterminate` 属性，表示不确定状态，一般用于实现全选的效果，实现部分选中的状态。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    import { Checkbox, CheckboxGroup } from '../../src';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+    const checkAll = ref(false);
+    const isIndeterminate = ref(true);
+    function handleCheckAllChange(val: boolean) {
+      checkedCities.value = val ? cities.map(c => c[0]) : [];
+      isIndeterminate.value = false;
+    }
+    function handleGroupChange(val: string[]) {
+      const checkedCount = val.length;
+      checkAll.value = checkedCount === cities.length;
+      isIndeterminate.value = checkedCount < cities.length;
+    }
+  </script>
+  <template>
+    <nt-checkbox
+      v-model="checkAll"
+      label="全选"
+      :indeterminate="isIndeterminate"
+      @change="handleCheckAllChange"
+    />
+    <nt-checkbox-group
+      v-model="checkedCities"
+      @change="handleGroupChange"
+    >
+      <nt-checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+      ></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <Checkbox
+      v-model="checkAll"
+      label="全选"
+      :indeterminate="isIndeterminate"
+      @change="handleCheckAllChange"
+    />
+    <CheckboxGroup
+      v-model="checkedCities"
+      @change="handleGroupChange"
+    >
+      <Checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+      ></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 按钮样式
+
+只需要设置 `checkbox` 的 `type` 为 `button`；就能将复选框变为按钮样式
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    import { ref } from 'vue';
+    const cities= [['CD', '成都'], ['BJ', '北京'], ['SZ', '深圳'], ['HZ', '杭州']];
+    const checkedCities = ref(['CD', 'SZ']);
+  </script>
+  <template>
+    <nt-checkbox-group v-model="checkedCities">
+      <nt-checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+        type="button"
+      ></nt-checkbox>
+    </nt-checkbox-group>
+  </template>
+  </textarea>
+  <template #preview>
+    <CheckboxGroup v-model="checkedCities">
+      <Checkbox
+        v-for="city in cities"
+        :key="city[0]"
+        :value="city[0]"
+        :label="city[1]"
+        type="button"
+      ></Checkbox>
+    </CheckboxGroup>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### Checkbox Props
+
+| 参数                    | 说明                           | 类型      | 默认值  |
+| ----------------------- | ------------------------------ | --------- | ------- |
+| `model-value / v-model` | 选中项绑定的值                 | `boolean` | -       |
+| `indeterminate`         | 设置不确定状态，仅负责样式控制 | `boolean` | `false` |
+| `name`                  | 原生 `name` 属性               | `string`  | -       |
+| `disabled`              | 是否禁用                       | `boolean` | `false` |
+| `value`                 | 原生 `value` 属性              | `string`  | -       |
+| `label`                 | 显示的标签                     | `string`  | -       |
+| `type`                  | 是否设置为按钮风格             | `button`  | -       |
+
+### CheckboxGroup Props
+
+| 参数                    | 说明           | 类型       | 默认值 |
+| ----------------------- | -------------- | ---------- | ------ |
+| `model-value / v-model` | 选中项绑定的值 | `string[]` | -      |
+
+### Checkbox Events
+
+| 事件     | 说明             | 参数                         |
+| -------- | ---------------- | ---------------------------- |
+| `change` | 选中项变化时触发 | `(checked: boolean) => void` |
+
+### CheckboxGroup Events
+
+| 事件     | 说明             | 参数                            |
+| -------- | ---------------- | ------------------------------- |
+| `change` | 选中项变化时触发 | `(checkList: string[]) => void` |
diff --git a/docs/components/table.md b/docs/components/table.md
index 9fcc9cf1..e29ff53f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -5,8 +5,8 @@
 ## 演示
 
 <script setup>
-  import { h } from 'vue'
-  import { Table, Button } from '../../src'
+  import { h, ref } from 'vue'
+  import { Table, Button, Input } from '../../src'
 
   const dataSource1 = [
     {
@@ -74,6 +74,47 @@
     },
   ]
 
+  const dataSource3 = [
+    {
+      name: '李四',
+      age: 19,
+      address: '北京朝阳',
+    },
+    {
+      name: '李四',
+      age: 19,
+      address: '北京西城',
+    },
+    {
+      name: '王五',
+      age: 18,
+      address: '北京朝阳',
+    },
+    {
+      name: '张三',
+      age: 20,
+      address: '北京朝阳',
+    },
+  ]
+
+   const dataSource4 = ref([
+    {
+      name: '李四',
+      age: 19,
+      address: '北京朝阳',
+    },
+    {
+      name: '张三',
+      age: 18,
+      address: '北京朝阳',
+    },
+    {
+      name: '王五',
+      age: 20,
+      address: '北京朝阳',
+    },
+  ])
+
   const columns1 = [{
     title: '姓名',
     key: 'name',
@@ -132,6 +173,107 @@
       h(Button, { type: 'text' }, { default: () => '删除'})
     ]
   }]
+  const columns4 = [{
+    title: '姓名',
+    key: 'name'
+  }, {
+    title: '基本信息',
+    children: [{
+      title: '年龄',
+      key: 'age',
+      sorter: true,
+    }, {
+      title: '住址',
+      key: 'address'
+    }]
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
+  const columns5 = [{
+    title: '姓名',
+    key: 'name',
+    colspan: (rowData, rowIndex) => {
+      if (rowIndex === 2) {
+        return 2
+      }
+      return 1
+    },
+    rowspan: (rowData, rowIndex) => {
+      if (rowIndex === 0) {
+        return 2
+      } else if (rowIndex === 1) {
+        return 0
+      } else {
+        return 1
+      }
+    }
+  }, {
+    title: '基本信息',
+    children: [{
+      title: '年龄',
+      key: 'age',
+      colspan: (rowData, rowIndex) => {
+        if (rowIndex === 2) {
+          return 0
+        }
+        return 1
+      },
+      rowspan: (rowData, rowIndex) => {
+        if (rowIndex === 0) {
+          return 2
+        } else if (rowIndex === 1) {
+          return 0
+        } else {
+          return 1
+        }
+      }
+    }, {
+      title: '住址',
+      key: 'address'
+    }]
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
+
+  const columns6 = [{
+    title: '姓名',
+    key: 'name',
+  }, {
+    title: '年龄',
+    key: 'age',
+    render: (row, index) => {
+      return h(Input, {
+        modelValue: row.age,
+        htmlType: 'number',
+        'onUpdate:modelValue': (value) => {
+          const newData = [...dataSource4.value]
+          newData[index].age = value
+          dataSource4.value = newData
+        }
+      })
+    }
+  }, {
+    title: '住址',
+    key: 'address'
+  }, {
+    title: '操作',
+    key: 'action',
+    render: () => [
+      h(Button, { type: 'text' }, { default: () => '编辑'}),
+      h(Button, { type: 'text' }, { default: () => '删除'})
+    ]
+  }]
 
   const defaultSort = { key: 'age', order: 'desc' }
 
@@ -256,7 +398,7 @@
 
 ### 固定表头和列
 
-给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 给列设置宽度，然后给需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。
+给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 将表格 将 `table-layout` 设置为 `fixed`，然后将需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。
 
 <ClientOnly>
   <CodePreview>
@@ -308,17 +450,18 @@
     }]
   </script>
   <template>
-    <nt-table :data="dataSource2" :columns="columns" fixed-head style="max-height:200px;" class="nt-scrollbar"></nt-table>
+    <nt-table :data="dataSource2" :columns="columns" table-layout="fixed" fixed-head style="max-height:200px;" class="nt-scrollbar"></nt-table>
   </template>
   </textarea>
   <template #preview>
-    <Table :data="dataSource2" :columns="columns2" fixed-head style="max-height:200px;" class="nt-scrollbar"></Table>
+    <Table :data="dataSource2" :columns="columns2" table-layout="fixed" fixed-head style="max-height:200px;" class="nt-scrollbar"></Table>
   </template>
   </CodePreview>
 </ClientOnly>
 
-> 1. 设置 `max-height` 可以通过直接设置 `style`；也可以通过 [tailwindcss-max-height](https://www.tailwindcss.cn/docs/max-height#setting-the-maximum-height)
-> 2. 如果想改变滚动条样式，参考 [工具样式-滚动条](../css-util#_2-滚动条样式)；引入样式表，然后给 `Table` 组件, 添加 `nt-scrollbar` 的类名: `<nt-table ... fixed-head class="max-h-24 nt-scrollbar"></nt-table>`
+> 1. _切记_: 要固定列，需要使用 `fixed` 布局，不能将 `table-layout` 设置为 `auto`
+> 2. 设置 `max-height` 可以通过直接设置 `style`；也可以通过 [tailwindcss-max-height](https://www.tailwindcss.cn/docs/max-height#setting-the-maximum-height)
+> 3. 如果想改变滚动条样式，参考 [工具样式-滚动条](../css-util#_2-滚动条样式)；引入样式表，然后给 `Table` 组件, 添加 `nt-scrollbar` 的类名: `<nt-table ... fixed-head class="max-h-24 nt-scrollbar"></nt-table>`
 
 ### 排序
 
@@ -383,31 +526,159 @@
   </CodePreview>
 </ClientOnly>
 
+### 多级表头
+
+配置 `columns` 的时候，给某一列增加一个 `children` 就能实现表头分组
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    const columns4 = [{
+      title: '姓名',
+      key: 'name'
+    }, {
+      title: '基本信息',
+      children: [{
+        title: '年龄',
+        key: 'age',
+        sorter: true,
+      }, {
+        title: '住址',
+        key: 'address'
+      }]
+    }, {
+      title: '操作',
+      key: 'action',
+      render: () => [
+        h(NtButton, { type: 'text' }, { default: () => '编辑'}),
+        h(NtButton, { type: 'text' }, { default: () => '删除'})
+      ]
+    }]
+  </script>
+  <template>
+    <nt-table :data="dataSource1" :columns="columns4" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource1" :columns="columns4" border></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 合并单元格
+
+通过配置 `columns` 中的 `colspan`、`rowspan` 来实现合并单元格；当 `colspan` 或者 `rowspan` 为 `0` 时，则不显示当前单元格
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue-html">
+  <template>
+    <nt-table :data="dataSource3" :columns="columns5" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource3" :columns="columns5" border></Table>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+### 可编辑表格
+
+通过自定义渲染的形式能够快速实现单元格的编辑
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+    const dataSource4 = ref([
+      {
+        name: '李四',
+        age: 19,
+        address: '北京朝阳',
+      },
+      {
+        name: '张三',
+        age: 18,
+        address: '北京朝阳',
+      },
+      {
+        name: '王五',
+        age: 20,
+        address: '北京朝阳',
+      },
+    ])
+    const columns6 = [{
+      title: '姓名',
+      key: 'name',
+    }, {
+      title: '年龄',
+      key: 'age',
+      render: (row, index) => {
+        return h(Input, {
+          modelValue: row.age,
+          htmlType: 'number',
+          'onUpdate:modelValue': (value) => {
+            const newData = [...dataSource4.value]
+            newData[index].age = value
+            dataSource4.value = newData
+          }
+        })
+      }
+    }, {
+      title: '住址',
+      key: 'address'
+    }, {
+      title: '操作',
+      key: 'action',
+      render: () => [
+        h(Button, { type: 'text' }, { default: () => '编辑'}),
+        h(Button, { type: 'text' }, { default: () => '删除'})
+      ]
+    }]
+  </script>
+  <template>
+    <nt-table :data="dataSource4" :columns="columns6" border></nt-table>
+  </template>
+  </textarea>
+  <template #preview>
+    <Table :data="dataSource4" :columns="columns6" border></Table>
+    <hr />
+    <div>{{ JSON.stringify(dataSource4, null, 2) }}</div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
 ## API
 
 ### Table Props
 
-| 参数             | 说明             | 类型                     | 默认值  |
-| ---------------- | ---------------- | ------------------------ | ------- |
-| `data`           | 数据源           | `array`                  | -       |
-| `columns`        | 表格列配置       | `ColumnOption[]`         | -       |
-| `default-sort`   | 初始排序         | `SortOption`             | -       |
-| `stripe`         | 是否为斑马纹     | `boolean`                | `true`  |
-| `border`         | 是否显示四周边框 | `boolean`                | `false` |
-| `fixed-head`     | 是否固定表头     | `boolean`                | `false` |
-| `sorter`         | 使用手动排序     | `(data: any[]) => any[]` | -       |
-| `render-summary` | 渲染表尾合计行   | `() => VNode \| VNode[]` | -       |
+| 参数             | 说明                           | 类型                     | 默认值  |
+| ---------------- | ------------------------------ | ------------------------ | ------- |
+| `data`           | 数据源                         | `array`                  | -       |
+| `columns`        | 表格列配置                     | `ColumnOption[]`         | -       |
+| `default-sort`   | 初始排序                       | `SortOption`             | -       |
+| `stripe`         | 是否为斑马纹                   | `boolean`                | `true`  |
+| `border`         | 是否显示四周边框               | `boolean`                | `false` |
+| `fixed-head`     | 是否固定表头                   | `boolean`                | `false` |
+| `sorter`         | 使用手动排序                   | `(data: any[]) => any[]` | -       |
+| `render-summary` | 渲染表尾合计行                 | `() => VNode \| VNode[]` | -       |
+| `table-layout`   | 表格的 `table-layout` 样式属性 | `fixed`、`auto`          | `auto`  |
 
 `ColumnOption` 选项:
 
-| 字段     | 说明                   | 类型                                            | 默认值  |
-| -------- | ---------------------- | ----------------------------------------------- | ------- |
-| `title`  | 列名                   | `string`                                        | -       |
-| `key`    | 列标识, 自动排序时必传 | `string`                                        | -       |
-| `width`  | 列宽                   | `string`、`number`                              | -       |
-| `fixed`  | 列是否固定             | `left`、`right`                                 | -       |
-| `sorter` | 是否排序               | `boolean`                                       | `false` |
-| `render` | 自定义渲染             | `(row: any, index: number) => VNode \| VNode[]` | -       |
+| 字段           | 说明                   | 类型                                                     | 默认值  |
+| -------------- | ---------------------- | -------------------------------------------------------- | ------- |
+| `title`        | 列名                   | `string`                                                 | -       |
+| `key`          | 列标识, 自动排序时必传 | `string`                                                 | -       |
+| `width`        | 列宽                   | `string`、`number`                                       | -       |
+| `fixed`        | 列是否固定             | `left`、`right`                                          | -       |
+| `sorter`       | 是否排序               | `boolean`                                                | `false` |
+| `render`       | 自定义渲染             | `(row: any, index: number) => VNode \| VNode[]`          | -       |
+| `titleRowspan` | 表头的行所占的行数     | `number`                                                 | -       |
+| `titleColspan` | 表头的单元格所占的列数 | `number`                                                 | -       |
+| `rowspan`      | 单元格的 `rowspan`     | `number` \| `(rowData: any, rowIndex: number) => number` | -       |
+| `colspan`      | 单元格的 `colspan`     | `number` \| `(rowData: any, rowIndex: number) => number` | -       |
 
 `SortOption` 选项
 
diff --git a/scripts/index.js b/scripts/index.js
index 074fd22a..ee342d44 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -60,13 +60,13 @@ async function createComponentTemplate(name) {
     '### 基础用法',
     '基础用法',
     '## API',
-    '### ${name} Props',
+    `### ${name} Props`,
     '| 参数 | 说明 | 类型 | 默认值 |',
     '| ---- | ---- | ---- | ---- |',
     '| x | x | x | x |',
   ];
   await write(
-    path.join(process.cwd(), 'docs/components', `${name}.md`),
+    path.join(process.cwd(), 'docs/components', `${name.toUpperCase()}.md`),
     docTemplateContents.join('\r\n'),
   );
   console.log('创建成功');
diff --git a/src/components/Checkbox.vue b/src/components/Checkbox.vue
new file mode 100644
index 00000000..0445e5ba
--- /dev/null
+++ b/src/components/Checkbox.vue
@@ -0,0 +1,72 @@
+<template>
+  <label
+    :class="[
+      'nt-checkbox',
+      indeterminate ? 'nt-checkbox--indeterminate' : '',
+      disabled ? 'nt-checkbox--disabled' : '',
+      type === 'button' ? 'nt-checkbox--button' : '',
+    ]"
+  >
+    <input
+      type="checkbox"
+      class="nt-checkbox__input"
+      :name="name"
+      :checked="isChecked"
+      @change="handleChange"
+      :disabled="disabled"
+      :value="value"
+    />
+    <span v-if="type !== 'button'" class="nt-checkbox__inner"></span>
+    <span class="nt-checkbox__label">{{ label }}</span>
+  </label>
+</template>
+<script setup lang="ts">
+import { Ref, computed, inject } from 'vue';
+
+const checkedModel = defineModel({ type: Boolean });
+
+const props = withDefaults(
+  defineProps<{
+    /** 设置不确定状态，仅负责样式控制 */
+    indeterminate?: boolean;
+    /** 原生 name 属性 */
+    name?: string;
+    /** 显示的 label 文本 */
+    label?: string;
+    disabled?: boolean;
+    value?: string;
+    type?: 'button';
+  }>(),
+  {
+    indeterminate: false,
+    disabled: false,
+  },
+);
+
+const emits = defineEmits(['change']);
+
+const { checkList, updateCheck } = inject<{
+  checkList: Ref<any[]> | null;
+  updateCheck: null | ((value: any) => void);
+}>('nt-check-group-check', {
+  checkList: null,
+  updateCheck: null,
+});
+
+const isChecked = computed(() => {
+  if (checkList != null) {
+    return checkList.value.includes(props.value);
+  }
+  return checkedModel.value;
+});
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLInputElement;
+  const checked = target.checked;
+  if (updateCheck != null) {
+    updateCheck(props.value);
+  }
+  checkedModel.value = checked;
+  emits('change', checked);
+}
+</script>
diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
new file mode 100644
index 00000000..be399d7e
--- /dev/null
+++ b/src/components/CheckboxButton.vue
@@ -0,0 +1,4 @@
+<template></template>
+<script setup lang="ts">
+import Checkbox from './Checkbox.vue';
+</script>
diff --git a/src/components/CheckboxGroup.vue b/src/components/CheckboxGroup.vue
new file mode 100644
index 00000000..8f0da04c
--- /dev/null
+++ b/src/components/CheckboxGroup.vue
@@ -0,0 +1,31 @@
+<template>
+  <div
+    :class="{
+      'nt-check-group': true,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const checkList = defineModel({ default: [] as any[] });
+const emits = defineEmits(['change']);
+
+function updateCheck(val: any) {
+  let index = checkList.value.indexOf(val);
+  if (index === -1) {
+    checkList.value.push(val);
+  } else {
+    checkList.value.splice(index, 1);
+  }
+  emits('change', [...checkList.value]);
+}
+
+provide('nt-check-group-check', {
+  checkList,
+  updateCheck,
+});
+</script>
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 756e0424..c8453e41 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -1,8 +1,18 @@
 <template>
-  <input :type="htmlType" class="nt-input" :placeholder="placeholder" />
+  <input
+    :value="model"
+    :type="htmlType"
+    class="nt-input"
+    :placeholder="placeholder"
+    @input="
+      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+    "
+  />
 </template>
 
 <script setup lang="ts">
+const model = defineModel();
+
 withDefaults(
   defineProps<{
     htmlType?: string;
diff --git a/src/components/Table.vue b/src/components/Table.vue
index eecebd5b..271cdb2d 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, PropType, ref } from 'vue';
+import { defineComponent, h, PropType, ref, watch } from 'vue';
 import type { VNode } from 'vue';
 
 export interface ColumnOption {
@@ -13,7 +13,18 @@ export interface ColumnOption {
   fixed?: 'left' | 'right';
   /** 列宽 */
   width?: string | number;
+  /** 单元格内容渲染函数 */
   render?: (row: any, index: number) => VNode | VNode[];
+  /** 表头分组配置 */
+  children?: ColumnOption[];
+  /** td colspan */
+  colspan: number | ((rowData: any, rowIndex: number) => number);
+  /** td rowspan */
+  rowspan: number | ((rowData: any, rowIndex: number) => number);
+  /** th colspan */
+  titleColspan: number;
+  /** th rowspan */
+  titleRowspan: number;
 }
 
 export interface DataSortState {
@@ -29,6 +40,60 @@ interface SortOption {
 
 type SorterFnOption = (data: any[]) => any[];
 
+/** 通过配置的 columns 计算表头跨行，跨列 */
+function calculateSpan(headers: ColumnOption[], level = 0): ColumnOption[] {
+  if (!Array.isArray(headers)) {
+    return [];
+  }
+
+  const spans = headers.map((header) => {
+    // 如果有子级元素，递归计算
+    if (header.children != null) {
+      let titleColspan = header.titleColspan;
+      const childrenSpans = calculateSpan(header.children, level + 1);
+      if (titleColspan == null) {
+        titleColspan = childrenSpans.reduce(
+          (sum, childSpan) => sum + childSpan.titleColspan,
+          0,
+        );
+      }
+      return {
+        ...header,
+        titleColspan: titleColspan,
+        titleRowspan: header.titleRowspan || 1,
+        children: childrenSpans,
+      };
+    } else {
+      let titleRowspan = header.titleRowspan;
+      if (titleRowspan == null) {
+        titleRowspan = getMaxDepth(headers);
+      }
+      // 如果元素没有子级，意味着它占满从当前层级到最底层的所有行
+      return {
+        ...header,
+        titleColspan: header.titleColspan || 1,
+        titleRowspan: titleRowspan,
+      };
+    }
+  });
+
+  return spans;
+}
+
+// 递归获取最深的层级数
+function getMaxDepth(headers: ColumnOption[]) {
+  let maxDepth = 1;
+  headers.forEach((header) => {
+    if (header.children) {
+      const childDepth = getMaxDepth(header.children) + 1;
+      if (childDepth > maxDepth) {
+        maxDepth = childDepth;
+      }
+    }
+  });
+  return maxDepth;
+}
+
 export default defineComponent({
   props: {
     columns: {
@@ -70,13 +135,24 @@ export default defineComponent({
       type: Function as PropType<() => VNode | VNode[]>,
       required: false,
     },
+    /** 是否使用 fixed[table-layout:fixed] 布局 */
+    tableLayout: {
+      type: String,
+      required: false,
+      default: 'auto',
+    },
   },
-  setup(props, { slots }) {
+  setup(props) {
     const sortInfo = ref<SortOption>({
       key: '',
       order: '',
     });
     const sourceData = ref(props.data);
+    const parsedColumns = calculateSpan(props.columns, 0);
+
+    watch(props.data, () => {
+      sourceData.value = props.data;
+    });
 
     function dataSort(
       data: any[],
@@ -106,23 +182,6 @@ export default defineComponent({
       sourceData.value = dataSort(props.data, sortInfo.value, props.sorter);
     }
 
-    function isFixed() {
-      const len = props.columns.length;
-      if (props.columns[0].fixed) return true;
-      if (props.columns[len - 1].fixed) return true;
-      let isFixed = false;
-      for (let i = 0; i < len; i++) {
-        if (props.columns[i].fixed) {
-          isFixed = true;
-          break;
-        }
-      }
-      return isFixed;
-    }
-
-    /** 是否使用 fixed[table-layout:fixed] 布局 */
-    let fixed = isFixed();
-
     function handleHeadClick({ sorter, key }: any) {
       if (sorter === true) {
         let sortKey = key;
@@ -144,128 +203,187 @@ export default defineComponent({
       }
     }
 
-    function renderHead() {
-      const columnsRender: VNode[] = [];
-      let left: string[] = [];
-      let right: string[] = [];
-
-      for (let i = 0, len = props.columns.length; i < len; i++) {
-        const column = props.columns[i];
+    function renderHeadCol(
+      column: ColumnOption,
+      index: number,
+      left: string[],
+      right: string[],
+    ) {
+      const thAttrs: any = {
+        class: {
+          'sort-column': column.sorter === true,
+          'sort-asc':
+            sortInfo.value.key === column.key && sortInfo.value.order === 'asc',
+          'sort-desc':
+            sortInfo.value.key === column.key &&
+            sortInfo.value.order === 'desc',
+          'nt-fixed': column.fixed,
+        },
+        style: {},
+        colspan: column.titleColspan,
+        rowspan: column.titleRowspan,
+      };
 
-        const thAttrs: any = {
-          class: {
-            'sort-column': column.sorter === true,
-            'sort-asc':
-              sortInfo.value.key === column.key &&
-              sortInfo.value.order === 'asc',
-            'sort-desc':
-              sortInfo.value.key === column.key &&
-              sortInfo.value.order === 'desc',
-            'nt-fixed': column.fixed,
-          },
-          style: {},
-        };
+      if (column.fixed) {
+        if (column.fixed === 'left') {
+          thAttrs.style.left =
+            left.length === 0 ? '0' : `calc(${left.join('+')})`;
+        } else {
+          thAttrs.style.right =
+            right.length === 0 ? '0' : `calc(${right.join('+')})`;
+        }
+      }
 
-        if (column.fixed) {
+      if (column.width) {
+        let colWidth: string = column.width as string;
+        if (typeof column.width === 'number') {
+          colWidth = `${column.width}px`;
+        }
+        thAttrs.style.width = colWidth;
+        if (column.fixed != null) {
           if (column.fixed === 'left') {
-            thAttrs.style.left =
-              left.length === 0 ? '0' : `calc(${left.join('+')})`;
+            left.push(colWidth);
           } else {
-            thAttrs.style.right =
-              right.length === 0 ? '0' : `calc(${right.join('+')})`;
-          }
-        }
-
-        if (column.width) {
-          let colWidth: string = column.width as string;
-          if (typeof column.width === 'number') {
-            colWidth = `${column.width}px`;
-          }
-          thAttrs.style.width = colWidth;
-          if (column.fixed != null) {
-            if (column.fixed === 'left') {
-              left.push(colWidth);
-            } else {
-              right.push(colWidth);
-            }
+            right.push(colWidth);
           }
         }
-        if (column.sorter === true) {
-          thAttrs.onClick = () => {
-            handleHeadClick({
-              key: column.key || '',
-              index: i,
-              order: 'asc',
-              sorter: column.sorter,
-            });
-          };
-        }
-
-        columnsRender.push(
-          h('th', thAttrs, [
-            h('span', column.title),
-            column.sorter === true
-              ? h('span', { class: 'caret-wrapper' }, [
-                  h('span', { class: 'sort-caret ascending' }),
-                  h('span', { class: 'sort-caret descending' }),
-                ])
-              : null,
-          ]),
-        );
       }
-      return columnsRender;
+      if (column.sorter === true) {
+        thAttrs.onClick = () => {
+          handleHeadClick({
+            key: column.key || '',
+            index,
+            order: 'asc',
+            sorter: column.sorter,
+          });
+        };
+      }
+      return h('th', thAttrs, [
+        h('span', column.title),
+        column.sorter === true
+          ? h('span', { class: 'caret-wrapper' }, [
+              h('span', { class: 'sort-caret ascending' }),
+              h('span', { class: 'sort-caret descending' }),
+            ])
+          : null,
+      ]);
     }
 
-    function renderBody() {
-      const bodies: VNode[] = [];
-      for (let i = 0, len = sourceData.value.length; i < len; i++) {
-        const dataItem = sourceData.value[i];
+    function renderHeadRow(
+      columns: ColumnOption[],
+      left: string[],
+      right: string[],
+      rowChildren: VNode[],
+      children: VNode[],
+    ) {
+      for (let i = 0, len = columns.length; i < len; i++) {
+        const column = columns[i];
+        rowChildren.push(renderHeadCol(column, i, left, right));
 
-        let left: string[] = [];
-        let right: string[] = [];
+        if (column.children != null) {
+          let rChildren: VNode[] = [];
+          renderHeadRow(column.children, left, right, rChildren, children);
+          children.push(h('tr', rChildren));
+        }
+      }
+    }
 
-        const $tds: VNode[] = [];
-        for (const column of props.columns) {
-          const tdAttr: any = {
-            style: {},
-            class: {
-              'nt-fixed': column.fixed,
-            },
-          };
+    function renderHead() {
+      const headTrs: VNode[] = [];
+      const rootChildren: VNode[] = [];
+      renderHeadRow(parsedColumns, [], [], rootChildren, headTrs);
+      headTrs.unshift(h('tr', rootChildren));
+      return headTrs;
+    }
 
-          if (column.fixed) {
-            if (column.fixed === 'left') {
-              tdAttr.style.left = left.length === 0 ? '0' : `${left.join('+')}`;
-            } else {
-              tdAttr.style.right =
-                right.length === 0 ? '0' : `${left.join('+')}`;
-            }
+    function renderBodyRow(
+      columns: ColumnOption[],
+      rowIndex: number,
+      rowData: any,
+      left: string[],
+      right: string[],
+      rowChildren: VNode[],
+    ) {
+      for (const column of columns) {
+        if (column.children == null) {
+          let rowspan: null | number = null;
+          let colspan: null | number = null;
+          if (typeof column.rowspan === 'number') {
+            rowspan = column.rowspan;
+          }
+          if (typeof column.rowspan === 'function') {
+            rowspan = column.rowspan(rowData, rowIndex);
           }
+          if (typeof column.colspan === 'number') {
+            rowspan = column.colspan;
+          }
+          if (typeof column.colspan === 'function') {
+            colspan = column.colspan(rowData, rowIndex);
+          }
+          if (rowspan !== 0 && colspan !== 0) {
+            const tdAttr: any = {
+              style: {},
+              class: {
+                'nt-fixed': column.fixed,
+              },
+              colspan,
+              rowspan,
+            };
 
-          if (column.width) {
-            let colWidth: string = column.width as string;
-            if (typeof column.width === 'number') {
-              colWidth = `${column.width}px`;
-            }
-            tdAttr.style.width = colWidth;
-            if (column.fixed != null) {
+            if (column.fixed) {
               if (column.fixed === 'left') {
-                left.push(colWidth);
+                tdAttr.style.left =
+                  left.length === 0 ? '0' : `${left.join('+')}`;
               } else {
-                right.push(colWidth);
+                tdAttr.style.right =
+                  right.length === 0 ? '0' : `${left.join('+')}`;
               }
             }
-          }
 
-          if (column.render != null) {
-            $tds.push(h('td', tdAttr, column.render(dataItem, i)));
-          } else if (column.key != null) {
-            $tds.push(h('td', tdAttr, dataItem[column.key]));
-          } else {
-            $tds.push(h('td', tdAttr, ''));
+            if (column.width) {
+              let colWidth: string = column.width as string;
+              if (typeof column.width === 'number') {
+                colWidth = `${column.width}px`;
+              }
+              tdAttr.style.width = colWidth;
+              if (column.fixed != null) {
+                if (column.fixed === 'left') {
+                  left.push(colWidth);
+                } else {
+                  right.push(colWidth);
+                }
+              }
+            }
+
+            if (column.render != null) {
+              rowChildren.push(
+                h('td', tdAttr, column.render(rowData, rowIndex)),
+              );
+            } else if (column.key != null) {
+              rowChildren.push(h('td', tdAttr, rowData[column.key]));
+            } else {
+              rowChildren.push(h('td', tdAttr, ''));
+            }
           }
+        } else {
+          renderBodyRow(
+            column.children,
+            rowIndex,
+            rowData,
+            left,
+            right,
+            rowChildren,
+          );
         }
+      }
+    }
 
+    function renderBody() {
+      const bodies: VNode[] = [];
+      for (let i = 0, len = sourceData.value.length; i < len; i++) {
+        const dataItem = sourceData.value[i];
+        const $tds: VNode[] = [];
+        renderBodyRow(parsedColumns, i, dataItem, [], [], $tds);
         bodies.push(h('tr', $tds));
       }
       return bodies;
@@ -281,7 +399,7 @@ export default defineComponent({
             class: [
               'nt-table',
               props.stripe ? 'nt-table-stripe' : '',
-              fixed ? 'nt-table-fixed' : '',
+              props.tableLayout === 'fixed' ? 'nt-table-fixed' : '',
               props.border ? 'nt-table-border' : '',
             ],
           },
@@ -296,7 +414,7 @@ export default defineComponent({
                   top: props.fixedHead ? '0' : undefined,
                 },
               },
-              slots.header != null ? slots.header : h('tr', renderHead()),
+              renderHead(),
             ),
             h(
               'tbody',
diff --git a/src/index.ts b/src/index.ts
index 179e9cbb..34eab24d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,3 +22,6 @@ export { default as Image } from './components/Image.vue';
 export { default as ImagePreview } from './components/ImagePreview.vue';
 export { default as Polygon } from './components/Polygon.vue';
 export { default as Shadow } from './components/Shadow.vue';
+export { default as Checkbox } from './components/Checkbox.vue';
+export { default as CheckboxGroup } from './components/CheckboxGroup.vue';
+export { default as CheckboxButton } from './components/CheckboxButton.vue';
diff --git a/style/checkbox/index.css b/style/checkbox/index.css
new file mode 100644
index 00000000..546a55af
--- /dev/null
+++ b/style/checkbox/index.css
@@ -0,0 +1,126 @@
+.nt-checkbox {
+  --nt-checkbox-size: 16px;
+  --nt-checkbox-label-color: #333;
+  --nt-checkbox-checked-color: var(--nt-primary-color, #4998f4);
+  --nt-checkbox-disabled-color: #e6e6e6;
+  --nt-checkbox-disabled-label-color: #c0c4cc;
+  --nt-checkbox-item-margin: 10px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+}
+.nt-checkbox__input {
+  opacity: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  position: absolute;
+  z-index: -1;
+}
+.nt-checkbox__label {
+  color: var(--nt-checkbox-label-color);
+  transition: color 0.3s ease-in-out;
+}
+.nt-checkbox__inner {
+  width: var(--nt-checkbox-size);
+  height: var(--nt-checkbox-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+  border: 1px solid #dcddd9;
+  box-sizing: border-box;
+  transition: all 0.3s ease-in-out;
+  position: relative;
+  margin-right: 5px;
+}
+.nt-checkbox__inner::after {
+  content: '';
+  width: calc(var(--nt-checkbox-size) * 0.6);
+  height: calc(var(--nt-checkbox-size) * 0.3);
+  display: block;
+  border: solid 1px transparent;
+  border-right: none;
+  border-top: none;
+  transform: rotate(-45deg);
+  transition: border-color 0.2s ease-in-out;
+}
+.nt-checkbox--indeterminate .nt-checkbox__inner {
+  background-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox--indeterminate .nt-checkbox__inner::before {
+  content: '';
+  width: calc(var(--nt-checkbox-size) * 0.4);
+  height: 1px;
+  display: block;
+  border: solid 1px #fff;
+  border-right: none;
+  border-top: none;
+  border-left: none;
+  position: absolute;
+}
+.nt-checkbox:hover .nt-checkbox__inner {
+  border-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox__input:checked + .nt-checkbox__inner {
+  background-color: var(--nt-checkbox-checked-color);
+}
+.nt-checkbox__input:checked + .nt-checkbox__inner::after {
+  border-color: #fff;
+}
+.nt-checkbox__input:checked ~ .nt-checkbox__label {
+  color: var(--nt-checkbox-checked-color);
+}
+
+.nt-checkbox--disabled {
+  --nt-checkbox-checked-color: var(--nt-checkbox-disabled-color);
+  cursor: not-allowed;
+}
+.nt-checkbox--disabled .nt-checkbox__inner {
+  border-color: var(--nt-checkbox-disabled-color);
+}
+.nt-checkbox--disabled .nt-checkbox__inner::after {
+  border-color: transparent;
+}
+.nt-checkbox--disabled .nt-checkbox__label {
+  color: var(--nt-checkbox-disabled-label-color);
+}
+.nt-check-group {
+  display: flex;
+  align-items: center;
+}
+
+.nt-check-group .nt-checkbox:not(:first-child) {
+  margin-left: var(--nt-checkbox-item-margin);
+}
+
+.nt-checkbox--button .nt-checkbox__label {
+  display: inline-flex;
+  height: var(--nt-form-edit-height, 32px);
+  justify-content: center;
+  align-items: center;
+  padding: 0 15px;
+  border: 1px solid #c0c4cc;
+  border-left-width: 0;
+}
+.nt-checkbox--button:first-child .nt-checkbox__label {
+  border-left-width: 1px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.nt-checkbox--button:last-child .nt-checkbox__label {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.nt-checkbox--button .nt-checkbox__input:checked ~ .nt-checkbox__label {
+  background-color: var(--nt-checkbox-checked-color);
+  color: #fff;
+  border-top-color: var(--nt-checkbox-checked-color);
+  border-bottom-color: var(--nt-checkbox-checked-color);
+  border-right-color: #fff;
+}
+.nt-check-group .nt-checkbox--button:not(:first-child) {
+  margin-left: 0;
+}
diff --git a/style/checkbox/index.js b/style/checkbox/index.js
new file mode 100644
index 00000000..4582418a
--- /dev/null
+++ b/style/checkbox/index.js
@@ -0,0 +1 @@
+import "./index.css";
\ No newline at end of file