From cbe390f7b34eb13043c5cfd847f05f319c435d16 Mon Sep 17 00:00:00 2001 From: Tenny Date: Sat, 15 Jun 2024 00:48:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Form=E8=A1=A8=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/release-please.yml | 20 +- CHANGELOG.md | 60 ++ docs/.vitepress/config.ts | 5 + docs/.vitepress/theme/index.ts | 3 + docs/components/Polygon.md | 135 +++- docs/components/button.md | 87 ++- docs/components/checkbox.md | 229 ++++++ docs/components/form.md | 120 ++++ docs/components/radio.md | 178 +++++ docs/components/switch.md | 73 ++ docs/components/table.md | 400 ++++++++++- docs/components/tooltip.md | 8 +- package.json | 30 +- pnpm-lock.yaml | 997 ++++++++++++++------------- scripts/index.js | 4 +- src/components/Button.vue | 34 +- src/components/Checkbox.vue | 91 +++ src/components/CheckboxGroup.vue | 33 + src/components/Input.vue | 17 +- src/components/Polygon.vue | 9 +- src/components/Radio.vue | 89 +++ src/components/RadioGroup.vue | 22 + src/components/Switch.vue | 36 + src/components/Table.vue | 477 +++++++++---- src/components/Tooltip.vue | 2 +- src/components/form/Form.vue | 101 +++ src/components/form/FormItem.vue | 79 +++ src/components/form/constant.ts | 1 + src/components/icon/ArrowDown.vue | 12 + src/components/icon/ArrowUp.vue | 12 + src/hooks/useFormReset.ts | 18 + src/index.ts | 11 + src/style.css | 25 + src/utils/index.ts | 51 ++ style/button/index.css | 88 ++- style/checkbox/index.css | 125 ++++ style/checkbox/index.js | 1 + style/form/index.css | 0 style/form/index.js | 1 + style/form_item/index.css | 36 + style/form_item/index.js | 1 + style/input/index.css | 4 + style/radio/index.css | 105 +++ style/radio/index.js | 1 + style/switch/index.css | 47 ++ style/switch/index.js | 1 + style/table/index.css | 5 + style/table/index.js | 4 +- style/tooltip/index.css | 6 +- style/vars.css | 6 +- 50 files changed, 3188 insertions(+), 712 deletions(-) create mode 100644 docs/components/checkbox.md create mode 100644 docs/components/form.md create mode 100644 docs/components/radio.md create mode 100644 docs/components/switch.md create mode 100644 src/components/Checkbox.vue create mode 100644 src/components/CheckboxGroup.vue create mode 100644 src/components/Radio.vue create mode 100644 src/components/RadioGroup.vue create mode 100644 src/components/Switch.vue create mode 100644 src/components/form/Form.vue create mode 100644 src/components/form/FormItem.vue create mode 100644 src/components/form/constant.ts create mode 100644 src/components/icon/ArrowDown.vue create mode 100644 src/components/icon/ArrowUp.vue create mode 100644 src/hooks/useFormReset.ts create mode 100644 style/checkbox/index.css create mode 100644 style/checkbox/index.js create mode 100644 style/form/index.css create mode 100644 style/form/index.js create mode 100644 style/form_item/index.css create mode 100644 style/form_item/index.js create mode 100644 style/radio/index.css create mode 100644 style/radio/index.js create mode 100644 style/switch/index.css create mode 100644 style/switch/index.js diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml index 679d3396..55052441 100644 --- a/.github/workflows/release-please.yml +++ b/.github/workflows/release-please.yml @@ -12,8 +12,12 @@ name: release-please jobs: release: runs-on: ubuntu-latest + outputs: + release_created: ${{ steps.set-output-step.outputs.release_created }} + job_output: ${{ steps.set-output-step.outputs.output_value }} + b: ${{ steps.set-output-step.outputs.b }} steps: - - uses: google-github-actions/release-please-action@v4 + - uses: googleapis/release-please-action@v4 id: release name: release with: @@ -25,13 +29,25 @@ jobs: # for more options release-type: node + - name: Generate output value + id: set-output-step + run: | + echo "Generating output value..." + VALUE="Hello, World!" + release_created=${{ steps.release.outputs.release_created }} + b="release_created_after" + echo "::set-output name=output_value::$VALUE" + echo "::set-output name=release_created::$release_created" + echo "::set-output name=b::$b" + joblog: runs-on: ubuntu-latest needs: release steps: - name: Print Previous Job Output run: | - echo "Previous job output: ${{ needs.release.outputs }}" + echo "Previous job output: " + echo "${{ toJson(needs.release.outputs) }}" publish: runs-on: ubuntu-latest diff --git a/CHANGELOG.md b/CHANGELOG.md index ed03bf03..1e097dc2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,65 @@ # Changelog +## [0.5.4](https://github.com/DvShu/neatui-vue/compare/v0.5.3...v0.5.4) (2024-06-07) + + +### Bug Fixes + +* 修复上个版本未正确导出组件 ([404aac0](https://github.com/DvShu/neatui-vue/commit/404aac00600084214276e9d38b29a267b1b5638c)) + +## [0.5.3](https://github.com/DvShu/neatui-vue/compare/v0.5.2...v0.5.3) (2024-06-07) + + +### Bug Fixes + +* **Icon:** 增加 ArrowUp、ArrowDown 组件 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602)) +* **Table:** 优化表格 ([f18a31f](https://github.com/DvShu/neatui-vue/commit/f18a31f487d7c16906290f5e561bd3aa187ba602)) + +## [0.5.2](https://github.com/DvShu/neatui-vue/compare/v0.5.1...v0.5.2) (2024-05-30) + + +### Bug Fixes + +* **Button:** 按钮增加曾定义颜色功能 ([3d7ea23](https://github.com/DvShu/neatui-vue/commit/3d7ea23490f5113299cda3e26f99945ecc8c382c)) + +## [0.5.1](https://github.com/DvShu/neatui-vue/compare/v0.5.0...v0.5.1) (2024-05-24) + + +### Bug Fixes + +* **Checkbox:** 复选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8)) +* **Polygon:** 完善多边形文档 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8)) +* **Radio:** 单选框增加 checked 属性 ([4dd23f6](https://github.com/DvShu/neatui-vue/commit/4dd23f62e7ac7905469108dad29f26666f83e8a8)) + +## [0.5.0](https://github.com/DvShu/neatui-vue/compare/v0.4.0...v0.5.0) (2024-05-23) + + +### Features + +* **Switch:** 开关按钮 ([3e557a1](https://github.com/DvShu/neatui-vue/commit/3e557a16afd208d4f47aa39c1981543daede8786)) + +## [0.4.0](https://github.com/DvShu/neatui-vue/compare/v0.3.1...v0.4.0) (2024-05-22) + + +### Features + +* **Radio:** 单选框 ([8eb7ce3](https://github.com/DvShu/neatui-vue/commit/8eb7ce33c9e2f777b0980180d3a3cc16e8277a7f)) + +## [0.3.1](https://github.com/DvShu/neatui-vue/compare/v0.3.0...v0.3.1) (2024-05-21) + + +### Bug Fixes + +* **Tooltip:** 修复 Tooltip 位置错误 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8)) +* 优化主题色 ([be72448](https://github.com/DvShu/neatui-vue/commit/be724481b204d8627aa6e8015f3b2ee5d6affcb8)) + +## [0.3.0](https://github.com/DvShu/neatui-vue/compare/v0.2.1...v0.3.0) (2024-05-17) + + +### Features + +* **Checkbox:** 复选框组件 ([0a57ae6](https://github.com/DvShu/neatui-vue/commit/0a57ae66b33f0f68d5125f41097634f66211953b)) + ## [0.2.1](https://github.com/DvShu/neatui-vue/compare/v0.2.0...v0.2.1) (2024-05-08) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index b46b1737..04ac8d3f 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -52,6 +52,11 @@ export default defineConfig({ { text: 'Image 图片', link: '/components/image' }, { text: 'Shadow 阴影', link: '/components/shadow' }, { text: 'Table 表格', link: '/components/table' }, + { text: 'Checkbox 复选框', link: '/components/checkbox' }, + { text: 'Radio 单选框', link: '/components/radio' }, + { text: 'Switch 开关', link: '/components/switch' }, + { text: 'Polygon 多边形', link: '/components/polygon' }, + { text: 'Form 表单', link: '/components/form' }, ], }, ], diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 5e0d931b..9a5e3f46 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -19,6 +19,9 @@ import CodePreview from '../../../src/app_components/CodePreview.vue'; import '../../../style/message'; import '../../../style/shadow'; import '../../../style/table'; +import '../../../style/switch'; +import '../../../style/form'; +import '../../../style/form_item'; export default { extends: DefaultTheme, diff --git a/docs/components/Polygon.md b/docs/components/Polygon.md index 566b46d1..6d18a4bb 100644 --- a/docs/components/Polygon.md +++ b/docs/components/Polygon.md @@ -1,5 +1,134 @@ -# Polygon -Polygon +# Polygon 多边形 + +显示一些多边形，例如：三角形、菱形、六边形、梯形等；全部采用 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 实现 + ## 演示 + + + ### 基础用法 -基础用法 \ No newline at end of file + +默认提供了多种三角形，只需要配置 `shape` 属性即可。 + + + + + + + + +### 自定义菱形 + +传递 `shape` 为 `rhombus`。然后自己定义 `nt-polygon-rhombus` 样式即可。同时可以通过 `background` 设置图形颜色 + + + + + + + + +## API + +### Shape Props + +| 属性名 | 类型 | 说明 | 默认值 | +| ------------ | -------- | ------ | ------ | +| `shape` | `string` | 形状 | - | +| `background` | `string` | 背景色 | - | + +### 样式变量 + +| 变量名 | 默认值 | 说明 | +| ------------------------- | ------------------------ | ------------ | +| `--nt-polygen-size` | `10px` | 多边形大小 | +| `--nt-polygen-width` | `var(--nt-polygen-size)` | 多边形宽度 | +| `--nt-polygen-height` | `var(--nt-polygen-size)` | 多边形高度 | +| `--nt-polygen-background` | `#666` | 多边形背景色 | diff --git a/docs/components/button.md b/docs/components/button.md index d9628148..40aa51bd 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -4,14 +4,18 @@ ## 基础使用 + + ### 按钮类型 -使用 `type` 控制按钮类型, 提供三种类型: `default`, `primary`, `text`。 +使用 `type` 控制按钮类型, 提供三种类型: `normal`, `primary`, `text`。 @@ -24,7 +28,7 @@ @@ -35,7 +39,7 @@ @@ -46,7 +50,7 @@ @@ -57,7 +61,7 @@ @@ -68,7 +72,7 @@ +### 透明背景 + +`ghost` 背景变为透明，常用在有色背景上 + + + + + + + +### 自定义颜色 + + + + + + + +### 扩展 `type` + +通过给 `type` 设置一个非预设的值，然后定义 `.nt-btn-x` 的样式。 + + + + + + + + ## API ### Button Props | 名称 | 说明 | 类型 | 默认值 | | ------------- | ---------------------------------------------- | --------- | ---------- | -| `type` | 按钮类型, `normal`, `primary`, `text` | `string` | `normal` | +| `type` | 按钮类型, `normal`, `primary`, `text` | `string` | - | | `disabled` | 按钮禁用状态 | `boolean` | `false` | | `loading` | 按钮加载状态 | `boolean` | `false` | -| `block` | 按钮是否为块级元素[适合其父宽度(宽度100%)] | `boolean` | false | +| `block` | 按钮是否为块级元素[适合其父宽度(宽度100%)] | `boolean` | `false` | | `round` | 按钮是否为圆角[弧形按钮] | `boolean` | `false` | | `circle` | 按钮是否为圆形 | `boolean` | `false` | | `htmlType` | 原生的 `type` 属性; `button`、submit`、`reset` | `string` | `button` | @@ -104,15 +165,15 @@ | 名称 | 描述 | 默认值 | | -------------------------------- | ------------------------ | ---------------------------- | | `--nt-btn-color` | 按钮的文字颜色 | `rgba(0, 0, 0, 0.65)` | -| `--nt-btn-bg-color` | 按钮的背景颜色 | ` #fff` | +| `--nt-btn-background` | 按钮的背景颜色 | ` #fff` | | `--nt-btn-border-color` | 按钮的边框颜色 | `#d9d9d9` | | `--nt-form-edit-height` | 按钮的高度 | `32px` | | `--nt-btn-hover-color` | 鼠标悬浮时按钮的文字颜色 | `#79b3f7` | | `--nt-btn-hover-border-color` | 鼠标悬浮时按钮的边框颜色 | `var(--nt-btn-hover-color)` | -| `--nt-btn-hover-bg-color` | 鼠标悬浮时按钮的背景颜色 | `var(--nt-btn-bg-color)` | +| `--nt-btn-hover-background` | 鼠标悬浮时按钮的背景颜色 | `var(--nt-btn-background)` | | `--nt-btn-active-color` | 点击时按钮的颜色 | `#197df1` | -| `--nt-btn-active-bg-color` | 点击时按钮的背景颜色 | `var(--nt-btn-bg-color)` | +| `--nt-btn-active-background` | 点击时按钮的背景颜色 | `var(--nt-btn-background)` | | `--nt-btn-active-border-color` | 点击时按钮的边框颜色 | `var(--nt-btn-active-color)` | | `--nt-btn-disabled-color` | 禁用时按钮的文字颜色 | `#c9c9c9` | -| `--nt-btn-disabled-bg-color` | 禁用时按钮的背景颜色 | `#fbfbfb` | +| `--nt-btn-disabled-background` | 禁用时按钮的背景颜色 | `#fbfbfb` | | `--nt-btn-disabled-border-color` | 禁用时按钮的边框颜色 | `#e6e6e6` | diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md new file mode 100644 index 00000000..e2973014 --- /dev/null +++ b/docs/components/checkbox.md @@ -0,0 +1,229 @@ +# Checkbox 复选框 + +在一组备选项中进行多选。适用提醒用户勾选场景，突出多选框选项，可以有效增加用户识别度。 + +## 演示 + + + +### 基础用法 + +单独使用可以表示两种状态之间的切换；在 `nt-checkbox` 元素中定义 `v-model` 绑定变量，单一的 `checkbox` 中，默认绑定变量的值会是 `Boolean`，选中为 `true`。 + + + + + + + +### 禁用状态 + +多选框不可用状态, 设置 `disabled` 属性即可。 + + + + + + + +### 选项框组 + +使用 `nt-checkbox-group` 元素来包裹 `nt-checkbox` 元素，实现复选框组。使用时需要给 `nt-checkbox` 传递 `value` 属性。 + + + + + + + + +### 中间状态 + +设置 `indeterminate` 属性，表示不确定状态，一般用于实现全选的效果，实现部分选中的状态。 + + + + + + + + +### 按钮样式 + +只需要设置 `checkbox` 的 `type` 为 `button`；就能将复选框变为按钮样式 + + + + + + + + +### 受控选中 + +复选框的选中状态是可控的，通过传递 `checked` 属性，`true` 为选中，`false` 为未选中。 + + + + + + + +## API + +### Checkbox Props + +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------- | ------------------------------ | --------- | ------- | +| `model-value / v-model` | 选中项绑定的值 | `boolean` | - | +| `indeterminate` | 设置不确定状态，仅负责样式控制 | `boolean` | `false` | +| `name` | 原生 `name` 属性 | `string` | - | +| `disabled` | 是否禁用 | `boolean` | `false` | +| `value` | 原生 `value` 属性 | `string` | - | +| `label` | 显示的标签 | `string` | - | +| `type` | 是否设置为按钮风格 | `button` | - | +| `checked` | 是否选中 | `boolean` | - | + +### CheckboxGroup Props + +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------- | -------------- | ---------- | ------ | +| `model-value / v-model` | 选中项绑定的值 | `string[]` | - | + +### Checkbox Events + +| 事件 | 说明 | 参数 | +| -------- | ---------------- | ---------------------------- | +| `change` | 选中项变化时触发 | `(checked: boolean) => void` | + +### CheckboxGroup Events + +| 事件 | 说明 | 参数 | +| -------- | ---------------- | ------------------------------- | +| `change` | 选中项变化时触发 | `(checkList: string[]) => void` | diff --git a/docs/components/form.md b/docs/components/form.md new file mode 100644 index 00000000..3513f548 --- /dev/null +++ b/docs/components/form.md @@ -0,0 +1,120 @@ +# Form + +包含数据录入、校验以及对应样式。 + +## 演示 + + + +### 基础用法 + +基本的表单数据域控制展示，包含布局、初始化、验证、提交。数据验证采用 [ph-utils/validator](https://gitee.com/towardly/ph/wikis/utils/validator) + + + + + + + + +## API + +### Form Props + +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | --------------------------------------------------------------------------- | --------------------- | ------ | +| `model` | 表单数据对象 | `Record` | - | +| `rules` | 表单验证规则 | `FormRule[]` | - | +| `label-width` | 标签的长度，例如 `50px`。 作为 `Form` 直接子元素的 `form-item` 会继承该值。 | `string` | - | + +### Form Events + +| 事件名 | 说明 | 类型 | +| -------- | -------------- | ------------ | +| `submit` | 提交表单时触发 | `() => void` | + +### FormItem Props + +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | -------------------------------------------------------------------------------------- | --------- | ------ | +| `label` | 标签文本 | `string` | - | +| `required` | 是否为必填项，如不设置，则会根据校验规则确认 | `boolean` | - | +| `name` | `model` 的键名; 使用表单校验时必填 | `string` | - | +| `label-width` | 标签宽度，例如 `50px` | `string` | - | +| `error` | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 `error`，并显示该错误信息。 | `string` | - | diff --git a/docs/components/radio.md b/docs/components/radio.md new file mode 100644 index 00000000..acff14da --- /dev/null +++ b/docs/components/radio.md @@ -0,0 +1,178 @@ +# Radio 单选框 + +在一组备选项中进行单选 + +## 演示 + + + +### 基础用法 + +当只有一个选项时，可以直接通过 `v-model` 绑定一个 `boolean` 值来控制是否选中；使用 `slot-label` 来重写选项的文字。 + + + + + + + + +### 禁用状态 + +设置 `disabled` 属性即可。 + + + + + + + +### 单选框组 + +结合 `nt-radio-group` 组件实现单选框组 + + + + + + + + +### 按钮样式 + +在单选框组基础上，设置 `nt-radio` 的 `type` 属性为 `button` 即可。 + + + + + + + + +### 受控 + +有时候需要自己手动控制选中状态时，只需要传递一个 `checked` 属性，`true` 选中, `false` 为未选中 + + + + + + + + +## API + +### Radio Props + +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------- | ------------------ | --------- | ------- | +| `model-value / v-model` | 是否选中 | `boolean` | x | +| `name` | 原生 `name` 属性 | `string` | - | +| `disabled` | 是否禁用 | `boolean` | `false` | +| `value` | 原生 `value` 属性 | `string` | - | +| `label` | 显示的标签 | `string` | - | +| `type` | 是否设置为按钮风格 | `button` | - | +| `checked` | 是否选中 | `boolean` | - | + +### RadioGroup Props + +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------- | -------------- | -------- | ------ | +| `model-value / v-model` | 选中项绑定的值 | `string` | - | + +### Radio Events + +| 事件 | 说明 | 参数 | +| -------- | ---------------- | ---------------------------- | +| `change` | 选中项变化时触发 | `(checked: boolean) => void` | + +### RadioGroup Events + +| 事件 | 说明 | 参数 | +| -------- | ---------------- | -------------------------------- | +| `change` | 选中项变化时触发 | `(checkedValue: string) => void` | + +### Radio Slots + +| 名称 | 说明 | +| ------- | -------------- | +| `label` | 自定义文本内容 | diff --git a/docs/components/switch.md b/docs/components/switch.md new file mode 100644 index 00000000..32be60f0 --- /dev/null +++ b/docs/components/switch.md @@ -0,0 +1,73 @@ +# Switch 开关 + +表示两种相互对立的状态间的切换，多用于触发「开/关」。 + +## 演示 + + + +### 基础用法 + +绑定 `v-model` 到一个 `boolean` 类型的变量。可以使用 `true` 和 `false` 分别表示开和关。 + + + + + + + + +### 文字描述 + +使用 `checked-text` 和 `unchecked-text` 属性来设置开关的文字描述。 + + + + + + + + +## API + +### Switch Props + +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | ------------------ | --------- | ------- | +| `v-model` | 开关状态(是否打开) | `boolean` | `false` | +| `checked-text` | 开启时的文字描述 | `string` | - | +| `unchecked-text` | 关闭时的文字描述 | `string` | - | + +### Switch Events + +| 事件名 | 说明 | 回调参数 | +| -------- | ------------------ | -------------------- | +| `change` | 开关状态改变时触发 | `(checked: boolean)` | + +### Switch CSS Variables + +| 变量名 | 默认值 | 描述 | +| -------------------- | ----------------------------- | ------------ | +| `--nt-switch-height` | `20px` | 开关按钮高度 | +| `--nt-switch-width` | `var(--nt-switch-height) * 2` | 开关按钮宽度 | diff --git a/docs/components/table.md b/docs/components/table.md index 9fcc9cf1..5ed90f8f 100644 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -5,8 +5,8 @@ ## 演示 ### 基础表格 @@ -256,7 +433,7 @@ ### 固定表头和列 -给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 给列设置宽度，然后给需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。 +给表格设置 `max-height` 样式，然后设置 `fixed-head` 属性为 `true` 即可实现固定表头。 将表格 将 `table-layout` 设置为 `fixed`，然后将需要固定的列设置 `fixed` 为 `left` 或 `right`，就能实现固定列。 @@ -308,17 +485,18 @@ }] -> 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` 的类名: `` +> 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` 的类名: `` ### 排序 @@ -383,31 +561,203 @@ +### 多级表头 + +配置 `columns` 的时候，给某一列增加一个 `children` 就能实现表头分组 + + + + + + + + +### 合并单元格 + +通过配置 `columns` 中的 `colspan`、`rowspan` 来实现合并单元格；当 `colspan` 或者 `rowspan` 为 `0` 时，则不显示当前单元格 + + + + + + + + +### 可编辑表格 + +通过自定义渲染的形式能够快速实现单元格的编辑 + + + + + + + + +### 可选择(单选) + + + + + + + + +### 可选择(多选) + + + + + + + + ## 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/docs/components/tooltip.md b/docs/components/tooltip.md index f7d5f9fd..8999ea24 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -74,7 +74,9 @@ import { Tooltip, Button } from '../../src'