Skip to content

E
Element
Commit b8a9fd59 authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

Merge pull request #89 from csvwolf/next 

edit dropdown/message/tab docs
parents e5e6140d 46835e95
Show whitespace changes
Inline Side-by-side
Showing with 235 additions and 99 deletions
examples/docs/dropdown.md
View file @ b8a9fd59
...@@ -25,7 +25,11 @@ ...@@ -25,7 +25,11 @@
## 基础用法 ## 基础用法
<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p> Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可生成对应的下拉菜单，通过`text`属性来设置按钮文字。
默认条件下，他又一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。
默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
<div class="demo-box"> <div class="demo-box">
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()"> <el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
...@@ -47,7 +51,9 @@ ...@@ -47,7 +51,9 @@
## 不带独立按钮的下拉菜单 ## 不带独立按钮的下拉菜单
可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。 如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，它接受一个`Boolean`，设置为`false`即可。
在下例中，可以看到，在选项三和选项四中插入了一条分割线，要达成这个效果很简单，只需要在选项四中设置`class`为`divider`。
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false"> <el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
...@@ -67,6 +73,8 @@ ...@@ -67,6 +73,8 @@
## 通过点击触发下拉 ## 通过点击触发下拉
默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
<div class="demo-box"> <div class="demo-box">
<el-dropdown text="主要按钮" type="primary" trigger="click"> <el-dropdown text="主要按钮" type="primary" trigger="click">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
...@@ -97,7 +105,9 @@ ...@@ -97,7 +105,9 @@
</el-dropdown> </el-dropdown>
``` ```
## 文字类型下拉菜单 ## 按钮样式
除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
<div class="demo-box"> <div class="demo-box">
<el-dropdown text="下拉菜单" type="text" :icon-separate="false"> <el-dropdown text="下拉菜单" type="text" :icon-separate="false">
...@@ -117,25 +127,26 @@ ...@@ -117,25 +127,26 @@
</el-dropdown> </el-dropdown>
``` ```
## 尺寸
<div class="demo-box"> <div class="demo-box">
<el-dropdown text="下拉菜单" type="primary" size="large"> <el-dropdown text="下拉菜单" type="primary" size="large">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item> <el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
<li class="divider">选项四</el-dropdown-item> <li class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary"> </el-dropdown>
<el-dropdown text="下拉菜单" type="primary">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item> <el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item> <el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="small"> </el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="small">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item> <el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item> <el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="mini"> </el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="mini">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item> <el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
...@@ -145,6 +156,60 @@ ...@@ -145,6 +156,60 @@
```html ```html
<el-dropdown text="下拉菜单" type="primary" size="large"> <el-dropdown text="下拉菜单" type="primary" size="large">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<li class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="small">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="mini">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
```
## 对齐方式
下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
<div class="demo-box">
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
</div>
```html
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
<el-dropdown-item>选项一</el-dropdown-item> <el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item> <el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
...@@ -152,12 +217,12 @@ ...@@ -152,12 +217,12 @@
</el-dropdown> </el-dropdown>
``` ```
## API ## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |
| text | 菜单按钮文本 | string | | | | text | 菜单按钮文本 | string | | |
| type | 菜单按钮类型，同 button | string | | | | type | 菜单按钮类型，同 Button 组件 | string | | |
| trigger | 触发下拉菜单的方式 | string | hover,click | hover | | trigger | 触发下拉菜单的方式 | string | hover,click | hover |
| icon-separate | 独立的下拉菜单按钮 | boolean | true, false | false | | icon-separate | 独立的下拉菜单按钮 | boolean | | false |
| size | 菜单按钮尺寸，同 button | string | large, small, mini | | | size | 菜单按钮尺寸，同 Button 组件 | string | large, small, mini | |
| menu-align | 菜单水平对齐方向 | string | start, end | end | | menu-align | 菜单水平对齐方向 | string | start, end | end |
examples/docs/message.md
View file @ b8a9fd59
...@@ -31,22 +31,22 @@ ...@@ -31,22 +31,22 @@
open5() { open5() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '恭喜你，这是一条成功消息' message: '这是一条消息提示'
}); });
}, },
open6() { open6() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '警告哦，这是一条警告消息', message: '恭喜你，这是一条成功消息',
type: 'warning' type: 'success'
}); });
}, },
open7() { open7() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '错了哦，这是一条错误消息', message: '警告哦，这是一条警告消息',
type: 'warning' type: 'warning'
}); });
}, },
......
examples/docs/steps.md
View file @ b8a9fd59
## 基础用法 ## 基础步骤条
简单的步骤条。
### 定宽步骤条 Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。
需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。
设置`finish-status`属性可以改变已经完成的步骤的状态，而`process-status`可以改变当前步骤的状态，Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
下两例分别展示了定宽的步骤条和自适应的步骤条：
<el-steps :space="100" :active="active" finish-status="success"> <el-steps :space="100" :active="active" finish-status="success">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
...@@ -53,24 +58,23 @@ ...@@ -53,24 +58,23 @@
</script> </script>
``` ```
### 自适应步骤条 <el-steps :active="1" process-status="error">
<el-steps :active="1">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step> <el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step> <el-step title="步骤 3"></el-step>
</el-steps> </el-steps>
```html ```html
<el-steps :active="1"> <el-steps :active="1" process-status="error">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step> <el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step> <el-step title="步骤 3"></el-step>
</el-steps> </el-steps>
``` ```
## 含状态步骤 ## 状态与描述
每一步骤显示出该步骤的状态。
Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
<el-steps :space="100" :active="1" finish-status="success"> <el-steps :space="100" :active="1" finish-status="success">
<el-step title="已完成"></el-step> <el-step title="已完成"></el-step>
...@@ -86,8 +90,7 @@ ...@@ -86,8 +90,7 @@
</el-steps> </el-steps>
``` ```
## 有描述的步骤条 除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
每个步骤有其对应的步骤状态描述。
<el-steps :space="200" :active="1"> <el-steps :space="200" :active="1">
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
...@@ -104,7 +107,8 @@ ...@@ -104,7 +107,8 @@
``` ```
## 带图标的步骤条 ## 带图标的步骤条
步骤条内可以启用各种自定义的图标。
除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
<el-steps :space="100" :active="1"> <el-steps :space="100" :active="1">
<el-step title="步骤 1" icon="edit"></el-step> <el-step title="步骤 1" icon="edit"></el-step>
...@@ -121,7 +125,8 @@ ...@@ -121,7 +125,8 @@
``` ```
## 竖式步骤条 ## 竖式步骤条
竖直方向的步骤条。
默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
<el-steps :space="100" direction="vertical" :active="1"> <el-steps :space="100" direction="vertical" :active="1">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
...@@ -137,47 +142,28 @@ ...@@ -137,47 +142,28 @@
</el-steps> </el-steps>
``` ```
## 步骤错误提示
每一步骤显示出该步骤的状态。
<el-steps :space="100" :active="1" finish-status="success" process-status="error">
<el-step title="已完成"></el-step>
<el-step title="审核失败"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```html
<el-steps :space="100" :active="1" finish-status="success" process-status="error">
<el-step title="已完成"></el-step>
<el-step title="审核失败"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```
## API ## API
### Steps.props ### Steps Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距 | Number | | | | space | 每个 step 的间距，不填写将自适应间距 | Number | | |
| direction | 显示方向 | String | `vertical` `horizontal` | `horizontal` | | direction | 显示方向 | string | 'vertical', 'horizontal' | 'horizontal' |
| active | 设置当前激活步骤 | Number | | 0 | | active | 设置当前激活步骤 | number | | 0 |
| process-status | 设置当前步骤的状态 | String | `wait` `process` `finish` `error` `success` | `process` | | process-status | 设置当前步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'process' |
| finish-status | 设置结束步骤的状态 | String | `wait` `process` `finish` `error` `success` | `finish` | | finish-status | 设置结束步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'finish' |
### Step.props ### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | 标题 | String | | | | title | 标题 | string | | |
| description | 描述性文字 | String | | | | description | 描述性文字 | string | | |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | String | | | icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | |
### Step Slot
### Step.slot
| name | 说明 | | name | 说明 |
|----|----| |----|----|
| icon | 图标 | | icon | 图标 |
| title | 标题 | | title | 标题 |
| description | 描述性文字 | | description | 描述性文字 |
examples/docs/table.md
View file @ b8a9fd59
...@@ -87,6 +87,10 @@ ...@@ -87,6 +87,10 @@
handleMultipleSelectionChange(val) { handleMultipleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
},
formatter(row, column) {
return row.address;
} }
}, },
...@@ -104,6 +108,10 @@ ...@@ -104,6 +108,10 @@
## 基础表格 ## 基础表格
在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。
在下例中，我们还用了`width`属性来定义列宽：
<el-table :data="tableData" style="width: 520px"> <el-table :data="tableData" style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
...@@ -148,6 +156,8 @@ ...@@ -148,6 +156,8 @@
## 带斑马纹表格 ## 带斑马纹表格
`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
<el-table :data="tableData" stripe style="width: 520px"> <el-table :data="tableData" stripe style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
...@@ -192,6 +202,8 @@ ...@@ -192,6 +202,8 @@
## 带边框表格 ## 带边框表格
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
<el-table :data="tableData" border style="width: 520px"> <el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
...@@ -236,6 +248,8 @@ ...@@ -236,6 +248,8 @@
## 带状态表格 ## 带状态表格
通过在`data`对象数组中加入字段，可以给行加上状态，Element 提供了四种状态：`$positive`、`$info`、`$warning`以及`$negative`，在对象新增字段中把状态设为`true`表示启用该状态。
<el-table :data="tableData2" style="width: 520px"> <el-table :data="tableData2" style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
...@@ -282,6 +296,8 @@ ...@@ -282,6 +296,8 @@
## 固定表头 ## 固定表头
只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格：
<el-table :data="tableData3" height="250" border style="width: 520px"> <el-table :data="tableData3" height="250" border style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
...@@ -337,6 +353,8 @@ ...@@ -337,6 +353,8 @@
``` ```
## 固定列 ## 固定列
除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用：
<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px"> <el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="300"></el-table-column> <el-table-column property="name" label="姓名" width="300"></el-table-column>
...@@ -380,6 +398,9 @@ ...@@ -380,6 +398,9 @@
``` ```
## 固定列和表头 ## 固定列和表头
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例：
<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250"> <el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
<el-table-column property="date" label="日期" width="150"></el-table-column> <el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="300"></el-table-column> <el-table-column property="name" label="姓名" width="300"></el-table-column>
...@@ -436,7 +457,16 @@ ...@@ -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 开始的索引号。
<el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange" style="width: 520px" allow-no-selection> <el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange" style="width: 520px" allow-no-selection>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column property="date" label="日期" width="120"></el-table-column> <el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column property="address" label="地址"></el-table-column>
...@@ -488,25 +518,33 @@ ...@@ -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 在指定内容上就会显示完整内容。
<el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange"> <el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column> <el-table-column type="selection" width="50"></el-table-column>
<el-table-column inline-template property="date" label="日期" width="120"> <el-table-column inline-template label="日期" width="120">
<div>{{ row.date }}</div> <div>{{ row.date }}</div>
</el-table-column> </el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
</el-table> </el-table>
<p>{{ multipleSelection }}</p> <p>{{ multipleSelection }}</p>
```html ```html
<template> <template>
<el-table :data="tableData3" selection-mode="multiple" @selectionchange="handleSelectionChange"> <el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column> <el-table-column type="selection" width="50"></el-table-column>
<el-table-column inline-template property="date" label="日期" width="120"> <el-table-column inline-template label="日期" width="120">
<div>{{ row.date }}</div> <div>{{ row.date }}</div>
</el-table-column> </el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
</el-table> </el-table>
</template> </template>
...@@ -558,10 +596,14 @@ ...@@ -558,10 +596,14 @@
## 排序 ## 排序
Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。
在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
<el-table :data="tableData" border style="width: 520px"> <el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" sortable width="120"></el-table-column> <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
</el-table> </el-table>
```html ```html
...@@ -569,7 +611,7 @@ ...@@ -569,7 +611,7 @@
<el-table :data="tableData" border style="width: 520px"> <el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" sortable width="120"></el-table-column> <el-table-column property="date" label="日期" sortable width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column> <el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column> <el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
</el-table> </el-table>
</template> </template>
...@@ -595,23 +637,28 @@ ...@@ -595,23 +637,28 @@
address: '上海市普陀区金沙江路 1516 弄' address: '上海市普陀区金沙江路 1516 弄'
}] }]
} }
},
methods: {
formatter(row, column) {
return row.address;
}
} }
} }
</script> </script>
``` ```
## el-table API ## Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | | | | data | 显示的数据 | array | | |
| height | table 的高度，默认高度为空，即自动高度 | string | | '' | | height | table 的高度，默认高度为空，即自动高度 | string | | '' |
| stripe | 是否为斑马纹 table | boolean | | false | | stripe | 是否为斑马纹 table | boolean | | false |
| border | 是否带有纵向边框 | boolean | | false | | border | 是否带有纵向边框 | boolean | | false |
| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' | | selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false | | allow-no-selection | 单选模式是否允许选项为空 | boolean | | false |
| fixedColumnCount | 固定列的个数 | number | | 0 | | fixed-column-count | 固定列的个数 | number | | 0 |
## el-table 事件 ## Table Events
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 参数 |
| ---- | ---- | ---- | | ---- | ---- | ---- |
| selectionchange | 当选择项发生变化时会触发该事件 | selected | | selectionchange | 当选择项发生变化时会触发该事件 | selected |
...@@ -619,7 +666,7 @@ ...@@ -619,7 +666,7 @@
| cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event | | cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event | | cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
## el-table-column API ## Table-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 显示的标题 | string | | '' | | label | 显示的标题 | string | | '' |
...@@ -630,4 +677,3 @@ ...@@ -630,4 +677,3 @@
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | | | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | |
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false | | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。此时不需要配置 property 属性 | | | | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。此时不需要配置 property 属性 | | |
examples/docs/tabs.md
View file @ b8a9fd59
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
title: '选项卡四', title: '选项卡四',
content: '选项卡四内容' content: '选项卡四内容'
}], }],
activeName: '3', activeName: 'two',
activeName2: '' activeName2: ''
} }
}, },
...@@ -37,25 +37,44 @@ ...@@ -37,25 +37,44 @@
## 基础使用 ## 基础使用
Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。
在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。
下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
<div> <div>
<el-tabs :active-name="activeName"> <el-tabs :active-name="activeName">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane> <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
```html ```html
<el-tabs :active-name="activeName"> <template>
<el-tabs :active-name="activeName">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane> <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs> </el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'two'
};
}
};
</script>
``` ```
## 标签风格 ## 多种风格
除了上例中的风格外，我们还提供了标签和卡片两种风格，只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
<div> <div>
<el-tabs type="card"> <el-tabs type="card">
...@@ -75,8 +94,6 @@ ...@@ -75,8 +94,6 @@
</el-tabs> </el-tabs>
``` ```
## 可关闭的标签
<div> <div>
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick"> <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
...@@ -85,7 +102,6 @@ ...@@ -85,7 +102,6 @@
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane> <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
{{activeName2}}
```html ```html
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick"> <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
...@@ -96,10 +112,14 @@ ...@@ -96,10 +112,14 @@
</el-tabs> </el-tabs>
``` ```
## 卡片风格 ## 可关闭的标签
在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
<div> <div>
<el-tabs type="border-card"> <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
...@@ -108,25 +128,43 @@ ...@@ -108,25 +128,43 @@
</div> </div>
```html ```html
<el-tabs type="border-card"> <template>
<el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane> <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane> <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane> <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane> <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs> </el-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab) {
console.log(tab);
}
}
};
</script>
``` ```
## TABS API ## Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card, border-card | | | type | 风格类型 | string | card, border-card | |
| closable | 真实值 | boolean | true, false | false | | closable | 标签是否可关闭 | boolean | true, false | false |
| activeName | 当前选中面板的 name | string | | | | active-name | 选中选项卡的 name | string | | |
| tab-click | tab 被点击的钩子 | string | | |
| tab-remove | tab 被删除的钩子 | string | | | ## Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click | tab 被选中的钩子 | 被选中的标签 tab |
| tab-remove | tab 被删除的钩子 | 被删除的标签 tab |
## TAB-PANE API ## Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | | | | label | 选项卡标题 | string | | |
| name | 与选项卡 activeName 对应的标识符 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' | | name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
examples/docs/tree.md
View file @ b8a9fd59
...@@ -58,6 +58,7 @@ ...@@ -58,6 +58,7 @@
}, },
loadNode(node, resolve) { loadNode(node, resolve) {
console.log(node);
if (node.level === -1) { if (node.level === -1) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]); return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment