diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md index 14c21a26c..a883465ef 100644 --- a/examples/docs/dropdown.md +++ b/examples/docs/dropdown.md @@ -73,7 +73,7 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可 ## 通过点击触发下拉 -默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成click，只要在`trigger`属性设置为`click`即可。 +默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
@@ -183,7 +183,7 @@ Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可 ## 对齐方式 -Element 提供两种下拉菜单的对齐方式：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`： +下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
diff --git a/examples/docs/steps.md b/examples/docs/steps.md index 082bac6bf..f0b5d13de 100644 --- a/examples/docs/steps.md +++ b/examples/docs/steps.md @@ -1,7 +1,12 @@ -## 基础用法 -简单的步骤条。 +## 基础步骤条 -### 定宽步骤条 +Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。 + +需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。 + +设置`finish-status`属性可以改变已经完成的步骤的状态，而`process-status`可以改变当前步骤的状态，Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。 + +下两例分别展示了定宽的步骤条和自适应的步骤条： @@ -53,24 +58,23 @@ ``` -### 自适应步骤条 - - + ```html - + ``` -## 含状态步骤 -每一步骤显示出该步骤的状态。 +## 状态与描述 + +Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。 @@ -86,8 +90,7 @@ ``` -## 有描述的步骤条 -每个步骤有其对应的步骤状态描述。 +除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子： @@ -104,7 +107,8 @@ ``` ## 带图标的步骤条 -步骤条内可以启用各种自定义的图标。 + +除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。 @@ -121,7 +125,8 @@ ``` ## 竖式步骤条 -竖直方向的步骤条。 + +默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。 @@ -137,47 +142,28 @@ ``` -## 步骤错误提示 -每一步骤显示出该步骤的状态。 - - - - - - - -```html - - - - - -``` - ## API -### Steps.props +### Steps Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | space | 每个 step 的间距，不填写将自适应间距 | Number | | | -| direction | 显示方向 | String | `vertical` `horizontal` | `horizontal` | -| active | 设置当前激活步骤 | Number | | 0 | -| process-status | 设置当前步骤的状态 | String | `wait` `process` `finish` `error` `success` | `process` | -| finish-status | 设置结束步骤的状态 | String | `wait` `process` `finish` `error` `success` | `finish` | +| direction | 显示方向 | string | 'vertical', 'horizontal' | 'horizontal' | +| active | 设置当前激活步骤 | number | | 0 | +| process-status | 设置当前步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'process' | +| finish-status | 设置结束步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'finish' | -### Step.props +### Step Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| title | 标题 | String | | | -| description | 描述性文字 | String | | | -| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | String | | +| title | 标题 | string | | | +| description | 描述性文字 | string | | | +| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | | - -### Step.slot +### Step Slot | name | 说明 | |----|----| | icon | 图标 | | title | 标题 | | description | 描述性文字 | - diff --git a/examples/docs/table.md b/examples/docs/table.md index 3ec41a683..ba0db20eb 100644 --- a/examples/docs/table.md +++ b/examples/docs/table.md @@ -87,6 +87,10 @@ handleMultipleSelectionChange(val) { this.multipleSelection = val; + }, + + formatter(row, column) { + return row.address; } }, @@ -104,6 +108,10 @@ ## 基础表格 +在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。 + +在下例中，我们还用了`width`属性来定义列宽： + @@ -148,6 +156,8 @@ ## 带斑马纹表格 +`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。 + @@ -192,6 +202,8 @@ ## 带边框表格 +默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。 + @@ -236,6 +248,8 @@ ## 带状态表格 +通过在`data`对象数组中加入字段，可以给行加上状态，Element 提供了四种状态：`$positive`、`$info`、`$warning`以及`$negative`，在对象新增字段中把状态设为`true`表示启用该状态。 + @@ -282,6 +296,8 @@ ## 固定表头 +只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格： + @@ -337,6 +353,8 @@ ``` ## 固定列 +除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用： + @@ -380,6 +398,9 @@ ``` ## 固定列和表头 + +固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例： + @@ -436,7 +457,16 @@ ## 单选 +更方便的是，Table 组件默认提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`即可。 + +之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。 + +在下例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。 + +如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。 + + @@ -488,25 +518,33 @@ ## 多选 +除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`的事件中，我们提供的参数从对象变成了对象数组。 + +此外，需要提供一个栏目来显示多选框，手动添加一列，设`type`属性为`selection`即可。 + +在下例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。 + +而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。 + - +
{{ row.date }}
 - +

{{ multipleSelection }}

```html @@ -558,10 +596,14 @@ ## 排序 +Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。 + +在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。 + - + ```html @@ -569,7 +611,7 @@ - + @@ -595,23 +637,28 @@ address: '上海市普陀区金沙江路 1516 弄' }] } + }, + methods: { + formatter(row, column) { + return row.address; + } } } ``` -## el-table API +## Table Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 显示的数据 | array | | | | height | table 的高度，默认高度为空，即自动高度 | string | | '' | | stripe | 是否为斑马纹 table | boolean | | false | | border | 是否带有纵向边框 | boolean | | false | -| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' | -| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false | -| fixedColumnCount | 固定列的个数 | number | | 0 | +| selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' | +| allow-no-selection | 单选模式是否允许选项为空 | boolean | | false | +| fixed-column-count | 固定列的个数 | number | | 0 | -## el-table 事件 +## Table Events | 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | selectionchange | 当选择项发生变化时会触发该事件 | selected | @@ -619,7 +666,7 @@ | cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event | | cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event | -## el-table-column API +## Table-column Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | label | 显示的标题 | string | | '' | @@ -630,4 +677,3 @@ | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | | | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。此时不需要配置 property 属性 | | | - diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md index b3cad9b71..fee838f72 100644 --- a/examples/docs/tabs.md +++ b/examples/docs/tabs.md @@ -39,7 +39,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。 -在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`……。 +在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。 下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。 @@ -119,7 +119,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta 除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
- + 选项卡一内容 选项卡二内容 选项卡三内容 @@ -156,10 +156,14 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta | type | 风格类型 | string | card, border-card | | | closable | 标签是否可关闭 | boolean | true, false | false | | active-name | 选中选项卡的 name | string | | | -| on-click | tab 被选中的钩子(提供一个参数tab) | function | | | -| on-remove | tab 被删除的钩子(提供一个参数tab) | function | | -## TAB-PANE Attributes +## Tabs Events +| 事件名称 | 说明 | 回调参数 | +|---------- |-------- |---------- | +| tab-click | tab 被选中的钩子 | 被选中的标签 tab | +| tab-remove | tab 被删除的钩子 | 被删除的标签 tab | + +## Tab-pane Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | label | 选项卡标题 | string | | | diff --git a/examples/docs/tree.md b/examples/docs/tree.md index e902e863b..522583843 100644 --- a/examples/docs/tree.md +++ b/examples/docs/tree.md @@ -58,6 +58,7 @@ }, loadNode(node, resolve) { + console.log(node); if (node.level === -1) { return resolve([{ name: 'Root1' }, { name: 'Root2' }]); }