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

Skip to content

Commit 3253a91

Browse files
PanJiaChenPanJiaChen
committed
format[treeTable]: format code
1 parent fea6e5f commit 3253a91

File tree

5 files changed

+100
-103
lines changed

5 files changed

+100
-103
lines changed

‎src/components/TreeTable/index.vue

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,34 @@
11
<template>
2-
<el-table :data="formatData" :row-style="showRow">
3-
<el-table-column v-if="columns.length===0" width="150">
4-
<template slot-scope="scope">
5-
<span v-for="space in scope.row._level"
6-
class="ms-tree-space"></span>
7-
<span class="tree-ctrl" v-if="iconShow(0,scope.row)"
8-
@click="toggleExpanded(scope.$index)">
9-
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
10-
<i v-else class="el-icon-minus"></i>
11-
</span>
12-
{{scope.$index}}
13-
</template>
14-
</el-table-column>
15-
<el-table-column v-else v-for="(column, index) in columns" :key="column.value"
16-
:label="column.text" :width="column.width">
17-
<template slot-scope="scope">
18-
<span v-if="index === 0" v-for="space in scope.row._level"
19-
class="ms-tree-space"></span>
20-
<span class="tree-ctrl" v-if="iconShow(index,scope.row)"
21-
@click="toggleExpanded(scope.$index)">
22-
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
23-
<i v-else class="el-icon-minus"></i>
24-
</span>
25-
{{scope.row[column.value]}}
26-
</template>
27-
</el-table-column>
28-
<slot></slot>
29-
</el-table>
2+
<el-table :data="formatData" :row-style="showRow">
3+
<el-table-column v-if="columns.length===0" width="150">
4+
<template slot-scope="scope">
5+
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
6+
<span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)">
7+
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
8+
<i v-else class="el-icon-minus"></i>
9+
</span>
10+
{{scope.$index}}
11+
</template>
12+
</el-table-column>
13+
<el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width">
14+
<template slot-scope="scope">
15+
<span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
16+
<span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)">
17+
<i v-if="!scope.row._expanded" class="el-icon-plus"></i>
18+
<i v-else class="el-icon-minus"></i>
19+
</span>
20+
{{scope.row[column.value]}}
21+
</template>
22+
</el-table-column>
23+
<slot></slot>
24+
</el-table>
3025
</template>
3126

3227
<script>
33-
/**
34-
Auth: Lei.j1ang
35-
Created: 2018/1/19-13:59
36-
*/
28+
/**
29+
Auth: Lei.j1ang
30+
Created: 2018/1/19-13:59
31+
*/
3732
import treeToArray from './eval'
3833
export default {
3934
name: 'treeTable',

‎src/components/TreeTable/readme.md

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
## 写在前面
22
此组件仅提供一个创建TreeTable的解决方案
3+
34
##prop说明
4-
###data
5-
必输
6-
5+
###data
6+
**必填**
7+
78
原始数据,要求是一个数组或者对象
89
```javascript
9-
[{
10-
key1:value1,
11-
key2:value2,
12-
children:[{
13-
key1:value1
14-
},{
15-
key1:value1
10+
[{
11+
key1: value1,
12+
key2: value2,
13+
children: [{
14+
key1: value1
15+
},
16+
{
17+
key1: value1
18+
}]
19+
},
20+
{
21+
key1: value1
1622
}]
17-
},{
18-
key1:value1
19-
}]
2023
```
2124
或者
2225
```javascript
2326
{
24-
key1:value1,
25-
key2:value2,
26-
children:[{
27-
key1:value1
28-
},{
29-
key1:value1
27+
key1: value1,
28+
key2: value2,
29+
children: [{
30+
key1: value1
31+
},
32+
{
33+
key1: value1
3034
}]
3135
}
3236
```
33-
37+
3438
###columns
3539
列属性,要求是一个数组
36-
40+
3741
1. text: 显示在表头
3842
2. value: 对应data的key，treeTable将显示相应的value
3943
3. width: 每列的宽度，为一个数字
@@ -49,25 +53,26 @@
4953
width:number
5054
}]
5155
```
52-
56+
5357
### expandAll
5458
是否默认全部展开，boolean值，默认为false
5559

5660
### evalFunc
5761
解析函数，function，非必须
58-
59-
如果不提供，将使用默认的evalFunc
60-
62+
63+
如果不提供，将使用默认的evalFunc
64+
6165
如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考此目录下的*eval.js*
62-
66+
6367
### evalArgs
6468
解析函数的参数，是一个数组
65-
69+
6670
**请注意，自定义的解析函数参数第一个为this.data，你不需要在evalArgs填写。**
67-
71+
6872
如你的解析函数需要的参数为`(this.data,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
73+
6974
## slot
7075
请参考`customTreeTable`
71-
76+
7277
## 其他
73-
如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
78+
如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue

‎src/router/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,9 @@ export const asyncRouterMap = [
151151
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
152152
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
153153
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
154-
{ path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }},
155-
{ path: 'treeTable', component: _import('example/table/treeTable/treeTable'), name: 'treeTable', meta: { title: 'treeTable' }},
156-
{ path: 'customTreeTable', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTable', meta: { title: 'customTreeTable' }}
154+
{ path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTable', meta: { title: 'treeTable' }},
155+
{ path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTable', meta: { title: 'customTreeTable' }},
156+
{ path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
157157
]
158158
},
159159
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}

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

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
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+
<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',
1414
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
1515
marginLeft:scope.row._marginLeft * 500+'px' }">
16-
<span style="display:inline-block"></span>
17-
</div>
16+
<span style="display:inline-block"></span>
1817
</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>
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>
2828
</template>
2929

3030
<script>
31-
/**
32-
Auth: Lei.j1ang
33-
Created: 2018/1/19-14:54
34-
*/
31+
/**
32+
Auth: Lei.j1ang
33+
Created: 2018/1/19-14:54
34+
*/
3535
import treeTable from '@/components/TreeTable'
3636
import treeToArray from './customEval'
37+
3738
export default {
3839
name: 'tree',
3940
components: { treeTable },
@@ -125,7 +126,3 @@ export default {
125126
}
126127
}
127128
</script>
128-
129-
<style scoped>
130-
131-
</style>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
2-
<tree-table :data="data" :columns="columns">
3-
</tree-table>
2+
<tree-table :data="data" :columns="columns"></tree-table>
43
</template>
54

65
<script>
7-
/**
8-
Auth: Lei.j1ang
9-
Created: 2018/1/19-14:54
10-
*/
11-
import treeTable from '@/components/TreeTable'
6+
/**
7+
Auth: Lei.j1ang
8+
Created: 2018/1/19-14:54
9+
*/
10+
import treeTable from '@/components/TreeTable'
11+
1212
export default {
1313
name: 'tree',
1414
components: { treeTable },

0 commit comments

Comments
 (0)