Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
Element
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
CI / CD Analytics
Repository Analytics
Value Stream Analytics
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
林焕东
Element
Commits
0b91eafb
Commit
0b91eafb
authored
Sep 08, 2016
by
Leopoldthecoder
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update Badge/Pagination/Progress/Table/Tag/Tree doc
parent
9caa78bd
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
25 additions
and
18 deletions
+25
-18
examples/docs/badge.md
examples/docs/badge.md
+2
-1
examples/docs/pagination.md
examples/docs/pagination.md
+3
-1
examples/docs/progress.md
examples/docs/progress.md
+3
-2
examples/docs/table.md
examples/docs/table.md
+9
-9
examples/docs/tag.md
examples/docs/tag.md
+4
-3
examples/docs/tree.md
examples/docs/tree.md
+4
-2
No files found.
examples/docs/badge.md
View file @
0b91eafb
...
...
@@ -5,7 +5,8 @@
</style>
## Badge 标记
出现在按钮、图标旁的数字或状态标记
出现在按钮、图标旁的数字或状态标记。
### 基础用法
展示新消息数量。
...
...
examples/docs/pagination.md
View file @
0b91eafb
## Pagination 分页
当数据量过多时,使用分页分解数据
当数据量过多时,使用分页分解数据
。
### 基础用法
...
...
@@ -40,6 +40,8 @@
### 附加功能
根据场景需要,可以添加其他功能模块。
:::demo 此例是一个完整的用例,使用了
`sizechange`
和
`currentchange`
事件来处理页码大小和当前页变动时候触发的事件。
`page-sizes`
接受一个整型数组,数组元素为展示的选择每页显示个数的选项,
`[100, 200, 300, 400]`
表示四个选项,每页显示 100 个,200 个,300 个或者 400 个。
```
html
...
...
examples/docs/progress.md
View file @
0b91eafb
...
...
@@ -11,7 +11,8 @@
</style>
## Progress 进度条
用于展示操作进度,告知用户当前状态和预期
用于展示操作进度,告知用户当前状态和预期。
### 线形进度条 — 百分比外显
...
...
@@ -27,7 +28,7 @@
### 线形进度条 — 百分比内显
百分比不占用额外控件,适用于文件上传等场景
百分比不占用额外控件,适用于文件上传等场景
。
:::demo Progress 组件可通过
`stroke-width`
属性更改进度条的高度,并可通过
`desc-inside`
属性来将进度条描述置于进度条内部。
...
...
examples/docs/table.md
View file @
0b91eafb
...
...
@@ -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
...
...
examples/docs/tag.md
View file @
0b91eafb
...
...
@@ -29,9 +29,10 @@
</style>
## Tag 标签
用于标记和选择
### 基础使用
用于标记和选择。
### 基础用法
:::demo 由
`type`
属性来定义,该属性可选填。
...
...
@@ -45,7 +46,7 @@
```
:::
### 可移除
的
标签
### 可移除标签
:::demo 设置
`closable`
属性来定义一个可移除的标签,接受一个
`Boolean`
,设置为
`true`
即可。默认的标签移除时会附带渐变动画,如果不想使用,可以设置
`close-transition`
属性,它接受一个
`Boolean`
,true 为关闭。设置
`close`
事件可以处理关闭后的回调函数。
...
...
examples/docs/tree.md
View file @
0b91eafb
...
...
@@ -96,10 +96,12 @@
## Tree 树形控件
用清晰的层级结构展示信息,可展开或折叠
用清晰的层级结构展示信息,可展开或折叠
。
### 基础用法
基础的树形结构展示。
::: demo
```
html
<el-tree
:data=
"data"
:props=
"defaultProps"
></el-tree>
...
...
@@ -141,7 +143,7 @@
### 可选择
适用于需要选择层级
的时候
使用。
适用于需要选择层级
时
使用。
::: demo
```
html
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment