diff --git a/examples/docs/badge.md b/examples/docs/badge.md index 09ee615fd..c3371ca6b 100644 --- a/examples/docs/badge.md +++ b/examples/docs/badge.md @@ -5,7 +5,8 @@ ## Badge 标记 -出现在按钮、图标旁的数字或状态标记 + +出现在按钮、图标旁的数字或状态标记。 ### 基础用法 展示新消息数量。 diff --git a/examples/docs/pagination.md b/examples/docs/pagination.md index 134830c4c..bde1d42d3 100644 --- a/examples/docs/pagination.md +++ b/examples/docs/pagination.md @@ -1,6 +1,6 @@ ## Pagination 分页 -当数据量过多时,使用分页分解数据 +当数据量过多时,使用分页分解数据。 ### 基础用法 @@ -40,6 +40,8 @@ ### 附加功能 +根据场景需要,可以添加其他功能模块。 + :::demo 此例是一个完整的用例,使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组,数组元素为展示的选择每页显示个数的选项,`[100, 200, 300, 400]`表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。 ```html diff --git a/examples/docs/progress.md b/examples/docs/progress.md index 2fa24218e..842d56234 100644 --- a/examples/docs/progress.md +++ b/examples/docs/progress.md @@ -11,7 +11,8 @@ ## Progress 进度条 -用于展示操作进度,告知用户当前状态和预期 + +用于展示操作进度,告知用户当前状态和预期。 ### 线形进度条 — 百分比外显 @@ -27,7 +28,7 @@ ### 线形进度条 — 百分比内显 -百分比不占用额外控件,适用于文件上传等场景 +百分比不占用额外控件,适用于文件上传等场景。 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度,并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。 diff --git a/examples/docs/table.md b/examples/docs/table.md index e02d012ca..1c5af4bbd 100644 --- a/examples/docs/table.md +++ b/examples/docs/table.md @@ -105,7 +105,7 @@ ### 基础表格 -基础的表格展示用法 +基础的表格展示用法。 :::demo 当`el-table`元素中注入`data`对象数组后,在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据,用`label`属性来定义表格的列名。可以使用`width`属性来定义列宽。 ```html @@ -160,7 +160,7 @@ ### 带斑马纹表格 -使用带斑马纹的表格,可以更容易区分出不同行的数据 +使用带斑马纹的表格,可以更容易区分出不同行的数据。 :::demo `stripe`属性可以创建带斑马纹的表格。它接受一个`Boolean`,默认为`false`,设置为`true`即为启用。 ```html @@ -270,7 +270,7 @@ ### 带状态表格 -可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容 +可将表格内容 highlight 显示,方便区分「成功、信息、警告、危险」等内容。 :::demo 为行添加自定义背景色,表明该行处于某种状态。若某一行拥有`custom-criteria`数组中的某个字段且值为`true`,则为该行添加`custom-background-colors`数组中对应的背景色。 ```html @@ -329,7 +329,7 @@ ### 固定表头 -纵向内容过多时,可选择固定表头 +纵向内容过多时,可选择固定表头。 :::demo 只要在`el-table`元素中定义了`height`属性,即可实现固定表头的表格,而不需要额外的代码。 ```html @@ -398,7 +398,7 @@ ### 固定列 -横向内容过多时,可选择固定首列 +横向内容过多时,可选择固定首列。 :::demo 固定列需要使用`fixed-column-count`属性,它接受一个`Number`,表示左起要固定的列数。 ```html @@ -456,7 +456,7 @@ ### 固定列和表头 -横纵内容过多时,可选择固定列和表头 +横纵内容过多时,可选择固定列和表头。 :::demo 固定列和表头可以同时使用,只需要将上述两个属性分别设置好即可。 ```html @@ -527,7 +527,7 @@ ### 单选 -选择单行数据时使用色块表示 +选择单行数据时使用色块表示。 :::demo Table 组件提供了选择的支持,只需要配置`selection-mode`属性即可实现单选(`single`)、多选(`multiple`),如果不需要则设置为`none`。之后由`selectionchange`事件来管理选中时触发的事件,它会传入一个`value`,`value`为生成表格时的对应对象。本例中还使用了`allow-no-selection`属性,它接受一个`Boolean`,若为`true`,则允许为空,默认为`false`,此时将会产生默认值,为填入数组的第一个对象。如果需要显示索引,可以增加一列`el-table-column`,设置`type`属性为`index`即可显示从 1 开始的索引号。 ```html @@ -596,7 +596,7 @@ ### 多选 -选择多行数据时使用 Checkbox +选择多行数据时使用 Checkbox。 :::demo 除了`selection-mode`的设置外,多选与单选并没有太大差别,只是传入`selectionchange`事件中的参数从对象变成了对象数组。此外,需要提供一个列来显示多选框: 手动添加一个`el-table-column`,设`type`属性为`selection`即可。在本例中,为了方便说明其他属性,我们还使用了`inline-template`和`show-tooltip-when-overflow`:设置了`inline-template`属性后,可以通过调用`row`对象中的值取代`property`属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用`show-tooltip-when-overflow`属性,它接受一个`Boolean`,为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。 ```html @@ -678,7 +678,7 @@ ### 排序 -对表格进行排序,可快速查找或对比数据 +对表格进行排序,可快速查找或对比数据。 :::demo 在列中设置`sortable`属性即可实现以该列为基准的排序,接受一个`Boolean`,默认为`false`。在本例中,我们还使用了`formatter`属性,它用于格式化指定列的值,接受一个`Function`,会传入两个参数:`row`和`column`,可以根据自己的需求进行处理。 ```html diff --git a/examples/docs/tag.md b/examples/docs/tag.md index 7fa49c01f..756943906 100644 --- a/examples/docs/tag.md +++ b/examples/docs/tag.md @@ -29,9 +29,10 @@ ## Tag 标签 -用于标记和选择 -### 基础使用 +用于标记和选择。 + +### 基础用法 :::demo 由`type`属性来定义,该属性可选填。 @@ -45,7 +46,7 @@ ``` ::: -### 可移除的标签 +### 可移除标签 :::demo 设置`closable`属性来定义一个可移除的标签,接受一个`Boolean`,设置为`true`即可。默认的标签移除时会附带渐变动画,如果不想使用,可以设置`close-transition`属性,它接受一个`Boolean`,true 为关闭。设置`close`事件可以处理关闭后的回调函数。 diff --git a/examples/docs/tree.md b/examples/docs/tree.md index 9f488a5da..c1c0a5ffe 100644 --- a/examples/docs/tree.md +++ b/examples/docs/tree.md @@ -96,10 +96,12 @@ ## Tree 树形控件 -用清晰的层级结构展示信息,可展开或折叠 +用清晰的层级结构展示信息,可展开或折叠。 ### 基础用法 +基础的树形结构展示。 + ::: demo ```html @@ -141,7 +143,7 @@ ### 可选择 -适用于需要选择层级的时候使用。 +适用于需要选择层级时使用。 ::: demo ```html