Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0d47e34

Browse files
PanJiaChenPanJiaChen
committed
perf[treeTable]
1 parent 3253a91 commit 0d47e34

File tree

7 files changed

+46
-29
lines changed

7 files changed

+46
-29
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
7878
- Export excel
7979
- Export zip
8080
- Front-end visualization excel
81+
- Tree Table
8182
- Table example
8283
- Dynamictable example
8384
- Drag and drop table example

‎README.zh-CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
- 导出excel
9292
- 导出zip
9393
- 前端可视化excel
94+
- 树形table
9495
- Table example
9596
- 动态table example
9697
- 拖拽table example

‎src/components/TreeTable/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<el-table :data="formatData" :row-style="showRow">
2+
<el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
33
<el-table-column v-if="columns.length===0" width="150">
44
<template slot-scope="scope">
55
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>

‎src/components/TreeTable/readme.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
## 写在前面
22
此组件仅提供一个创建TreeTable的解决方案
33

4-
##prop说明
5-
###data
4+
## prop说明
5+
### data
66
**必填**
77

88
原始数据,要求是一个数组或者对象
@@ -35,7 +35,7 @@
3535
}
3636
```
3737

38-
###columns
38+
### columns
3939
列属性,要求是一个数组
4040

4141
1. text: 显示在表头

‎src/lang/zh.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default {
2828
dragTable: '拖拽table',
2929
inlineEditTable: 'table内编辑',
3030
complexTable: '综合table',
31-
treeTable: '树表',
31+
treeTable: '树形表格',
3232
customTreeTable: '自定义树表',
3333
tab: 'Tab',
3434
form: '表单',

‎src/views/example/table/treeTable/customTreeTable.vue

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
<template>
2-
<tree-table :data="data" :evalFunc="func" :evalArgs="args">
3-
<el-table-column label="事件">
4-
<template slot-scope="scope">
5-
<span style="color:sandybrown">{{scope.row.event}}</span>
6-
<el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
7-
</template>
8-
</el-table-column>
9-
<el-table-column label="时间线">
10-
<template slot-scope="scope">
11-
<el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
12-
<div class="processContainer">
13-
<div class="process" :style="{ width:scope.row._width * 500+'px',
2+
<div class="app-container">
3+
4+
<el-tag style="margin-bottom:20px;">
5+
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
6+
</el-tag>
7+
8+
<tree-table :data="data" :evalFunc="func" :evalArgs="args" border>
9+
<el-table-column label="事件">
10+
<template slot-scope="scope">
11+
<span style="color:sandybrown">{{scope.row.event}}</span>
12+
<el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
13+
</template>
14+
</el-table-column>
15+
<el-table-column label="时间线">
16+
<template slot-scope="scope">
17+
<el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left">
18+
<div class="processContainer">
19+
<div class="process" :style="{ width:scope.row._width * 500+'px',
1420
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
1521
marginLeft:scope.row._marginLeft * 500+'px' }">
16-
<span style="display:inline-block"></span>
22+
<span style="display:inline-block"></span>
23+
</div>
1724
</div>
18-
</div>
19-
</el-tooltip>
20-
</template>
21-
</el-table-column>
22-
<el-table-column label="操作" width="200">
23-
<template slot-scope="scope">
24-
<el-button type="text" @click="message(scope.row)">点击</el-button>
25-
</template>
26-
</el-table-column>
27-
</tree-table>
25+
</el-tooltip>
26+
</template>
27+
</el-table-column>
28+
<el-table-column label="操作" width="200">
29+
<template slot-scope="scope">
30+
<el-button type="text" @click="message(scope.row)">点击</el-button>
31+
</template>
32+
</el-table-column>
33+
</tree-table>
34+
</div>
2835
</template>
2936

3037
<script>

‎src/views/example/table/treeTable/treeTable.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
<template>
2-
<tree-table :data="data" :columns="columns"></tree-table>
2+
<div class="app-container">
3+
4+
<el-tag style="margin-bottom:20px;">
5+
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
6+
</el-tag>
7+
8+
<tree-table :data="data" :columns="columns" border></tree-table>
9+
10+
</div>
311
</template>
412

513
<script>

0 commit comments

Comments
 (0)