Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
gyf5267218
vue-element-admin
提交
3253a91a
V
vue-element-admin
项目概览
gyf5267218
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
4
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
3253a91a
编写于
1月 23, 2018
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
format[treeTable]: format code
上级
fea6e5fe
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
100 addition
and
103 deletion
+100
-103
src/components/TreeTable/index.vue
src/components/TreeTable/index.vue
+27
-32
src/components/TreeTable/readme.md
src/components/TreeTable/readme.md
+35
-30
src/router/index.js
src/router/index.js
+3
-3
src/views/example/table/treeTable/customTreeTable.vue
src/views/example/table/treeTable/customTreeTable.vue
+28
-31
src/views/example/table/treeTable/treeTable.vue
src/views/example/table/treeTable/treeTable.vue
+7
-7
未找到文件。
src/components/TreeTable/index.vue
浏览文件 @
3253a91a
<
template
>
<el-table
:data=
"formatData"
:row-style=
"showRow"
>
<el-table-column
v-if=
"columns.length===0"
width=
"150"
>
<template
slot-scope=
"scope"
>
<span
v-for=
"space in scope.row._level"
class=
"ms-tree-space"
></span>
<span
class=
"tree-ctrl"
v-if=
"iconShow(0,scope.row)"
@
click=
"toggleExpanded(scope.$index)"
>
<i
v-if=
"!scope.row._expanded"
class=
"el-icon-plus"
></i>
<i
v-else
class=
"el-icon-minus"
></i>
</span>
{{
scope
.
$index
}}
</
template
>
</el-table-column>
<el-table-column
v-else
v-for=
"(column, index) in columns"
:key=
"column.value"
:label=
"column.text"
:width=
"column.width"
>
<
template
slot-scope=
"scope"
>
<span
v-if=
"index === 0"
v-for=
"space in scope.row._level"
class=
"ms-tree-space"
></span>
<span
class=
"tree-ctrl"
v-if=
"iconShow(index,scope.row)"
@
click=
"toggleExpanded(scope.$index)"
>
<i
v-if=
"!scope.row._expanded"
class=
"el-icon-plus"
></i>
<i
v-else
class=
"el-icon-minus"
></i>
</span>
{{
scope
.
row
[
column
.
value
]
}}
</
template
>
</el-table-column>
<slot></slot>
</el-table>
<el-table
:data=
"formatData"
:row-style=
"showRow"
>
<el-table-column
v-if=
"columns.length===0"
width=
"150"
>
<template
slot-scope=
"scope"
>
<span
v-for=
"space in scope.row._level"
class=
"ms-tree-space"
:key=
"space"
></span>
<span
class=
"tree-ctrl"
v-if=
"iconShow(0,scope.row)"
@
click=
"toggleExpanded(scope.$index)"
>
<i
v-if=
"!scope.row._expanded"
class=
"el-icon-plus"
></i>
<i
v-else
class=
"el-icon-minus"
></i>
</span>
{{
scope
.
$index
}}
</
template
>
</el-table-column>
<el-table-column
v-else
v-for=
"(column, index) in columns"
:key=
"column.value"
:label=
"column.text"
:width=
"column.width"
>
<
template
slot-scope=
"scope"
>
<span
v-if=
"index === 0"
v-for=
"space in scope.row._level"
class=
"ms-tree-space"
:key=
"space"
></span>
<span
class=
"tree-ctrl"
v-if=
"iconShow(index,scope.row)"
@
click=
"toggleExpanded(scope.$index)"
>
<i
v-if=
"!scope.row._expanded"
class=
"el-icon-plus"
></i>
<i
v-else
class=
"el-icon-minus"
></i>
</span>
{{
scope
.
row
[
column
.
value
]
}}
</
template
>
</el-table-column>
<slot></slot>
</el-table>
</template>
<
script
>
/**
Auth: Lei.j1ang
Created: 2018/1/19-13:59
*/
/**
Auth: Lei.j1ang
Created: 2018/1/19-13:59
*/
import
treeToArray
from
'
./eval
'
export
default
{
name
:
'
treeTable
'
,
...
...
src/components/TreeTable/readme.md
浏览文件 @
3253a91a
## 写在前面
此组件仅提供一个创建TreeTable的解决方案
##prop说明
###data
必输
###data
**必填**
原始数据,要求是一个数组或者对象
```
javascript
[{
key1
:
value1
,
key2
:
value2
,
children
:[{
key1
:
value1
},{
key1
:
value1
[{
key1
:
value1
,
key2
:
value2
,
children
:
[{
key1
:
value1
},
{
key1
:
value1
}]
},
{
key1
:
value1
}]
},{
key1
:
value1
}]
```
或者
```
javascript
{
key1
:
value1
,
key2
:
value2
,
children
:[{
key1
:
value1
},{
key1
:
value1
key1
:
value1
,
key2
:
value2
,
children
:
[{
key1
:
value1
},
{
key1
:
value1
}]
}
```
###columns
列属性,要求是一个数组
1.
text: 显示在表头
2.
value: 对应data的key,treeTable将显示相应的value
3.
width: 每列的宽度,为一个数字
...
...
@@ -49,25 +53,26 @@
width
:
number
}]
```
### expandAll
是否默认全部展开,boolean值,默认为false
### evalFunc
解析函数,function,非必须
如果不提供,将使用默认的evalFunc
如果不提供,将使用默认的evalFunc
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考此目录下的
*eval.js*
### evalArgs
解析函数的参数,是一个数组
**请注意,自定义的解析函数参数第一个为this.data,你不需要在evalArgs填写。**
如你的解析函数需要的参数为
`(this.data,1,2,3,4)`
,那么你只需要将
`[1,2,3,4]`
赋值给
`evalArgs`
就可以了
## slot
请参考
`customTreeTable`
## 其他
如果有其他的需求,请参考
[
el-table
](
http://element-cn.eleme.io/#/en-US/component/table
)
的api自行修改index.vue
\ No newline at end of file
如果有其他的需求,请参考
[
el-table
](
http://element-cn.eleme.io/#/en-US/component/table
)
的api自行修改index.vue
src/router/index.js
浏览文件 @
3253a91a
...
...
@@ -151,9 +151,9 @@ export const asyncRouterMap = [
{
path
:
'
dynamic-table
'
,
component
:
_import
(
'
example/table/dynamicTable/index
'
),
name
:
'
dynamicTable
'
,
meta
:
{
title
:
'
dynamicTable
'
}},
{
path
:
'
drag-table
'
,
component
:
_import
(
'
example/table/dragTable
'
),
name
:
'
dragTable
'
,
meta
:
{
title
:
'
dragTable
'
}},
{
path
:
'
inline-edit-table
'
,
component
:
_import
(
'
example/table/inlineEditTable
'
),
name
:
'
inlineEditTable
'
,
meta
:
{
title
:
'
inlineEditTable
'
}},
{
path
:
'
complex-table
'
,
component
:
_import
(
'
example/table/complexTable
'
),
name
:
'
complexTable
'
,
meta
:
{
title
:
'
complex
Table
'
}},
{
path
:
'
treeTable
'
,
component
:
_import
(
'
example/table/treeTable/treeTable
'
),
name
:
'
treeTable
'
,
meta
:
{
title
:
'
t
reeTable
'
}},
{
path
:
'
c
ustomTreeTable
'
,
component
:
_import
(
'
example/table/treeTable/customTreeTable
'
),
name
:
'
customTreeTable
'
,
meta
:
{
title
:
'
customTree
Table
'
}}
{
path
:
'
tree-table
'
,
component
:
_import
(
'
example/table/treeTable/treeTable
'
),
name
:
'
treeTable
'
,
meta
:
{
title
:
'
tree
Table
'
}},
{
path
:
'
custom-tree-table
'
,
component
:
_import
(
'
example/table/treeTable/customTreeTable
'
),
name
:
'
customTreeTable
'
,
meta
:
{
title
:
'
customT
reeTable
'
}},
{
path
:
'
c
omplex-table
'
,
component
:
_import
(
'
example/table/complexTable
'
),
name
:
'
complexTable
'
,
meta
:
{
title
:
'
complex
Table
'
}}
]
},
{
path
:
'
tab/index
'
,
icon
:
'
tab
'
,
component
:
_import
(
'
example/tab/index
'
),
name
:
'
tab
'
,
meta
:
{
title
:
'
tab
'
}}
...
...
src/views/example/table/treeTable/customTreeTable.vue
浏览文件 @
3253a91a
<
template
>
<tree-table
:data=
"data"
:evalFunc=
"func"
:evalArgs=
"args"
>
<el-table-column
label=
"事件"
>
<template
slot-scope=
"scope"
>
<span
style=
"color:sandybrown"
>
{{
scope
.
row
.
event
}}
</span>
<el-tag>
{{
scope
.
row
.
timeLine
+
'
ms
'
}}
</el-tag>
</
template
>
</el-table-column>
<el-table-column
label=
"时间线"
>
<
template
slot-scope=
"scope"
>
<el-tooltip
effect=
"dark"
:content=
"scope.row.timeLine+'ms'"
placement=
"left"
>
<div
class=
"processContainer"
>
<div
class=
"process"
:style=
"
{ width:scope.row._width * 500+'px',
<tree-table
:data=
"data"
:evalFunc=
"func"
:evalArgs=
"args"
>
<el-table-column
label=
"事件"
>
<template
slot-scope=
"scope"
>
<span
style=
"color:sandybrown"
>
{{
scope
.
row
.
event
}}
</span>
<el-tag>
{{
scope
.
row
.
timeLine
+
'
ms
'
}}
</el-tag>
</
template
>
</el-table-column>
<el-table-column
label=
"时间线"
>
<
template
slot-scope=
"scope"
>
<el-tooltip
effect=
"dark"
:content=
"scope.row.timeLine+'ms'"
placement=
"left"
>
<div
class=
"processContainer"
>
<div
class=
"process"
:style=
"
{ width:scope.row._width * 500+'px',
background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
marginLeft:scope.row._marginLeft * 500+'px' }">
<span
style=
"display:inline-block"
></span>
</div>
<span
style=
"display:inline-block"
></span>
</div>
</el-tooltip>
</
template
>
</el-table-column>
<el-table-column
label=
"操作"
width=
"200"
>
<
template
slot-scope=
"scope"
>
<el-button
type=
"text"
@
click=
"message(scope.row)"
>
点击
</el-button>
</
template
>
</el-table-column>
</tree-table>
</div>
</el-tooltip>
</
template
>
</el-table-column>
<el-table-column
label=
"操作"
width=
"200"
>
<
template
slot-scope=
"scope"
>
<el-button
type=
"text"
@
click=
"message(scope.row)"
>
点击
</el-button>
</
template
>
</el-table-column>
</tree-table>
</template>
<
script
>
/**
Auth: Lei.j1ang
Created: 2018/1/19-14:54
*/
/**
Auth: Lei.j1ang
Created: 2018/1/19-14:54
*/
import
treeTable
from
'
@/components/TreeTable
'
import
treeToArray
from
'
./customEval
'
export
default
{
name
:
'
tree
'
,
components
:
{
treeTable
},
...
...
@@ -125,7 +126,3 @@ export default {
}
}
</
script
>
<
style
scoped
>
</
style
>
src/views/example/table/treeTable/treeTable.vue
浏览文件 @
3253a91a
<
template
>
<tree-table
:data=
"data"
:columns=
"columns"
>
</tree-table>
<tree-table
:data=
"data"
:columns=
"columns"
></tree-table>
</
template
>
<
script
>
/**
Auth: Lei.j1ang
Created: 2018/1/19-14:54
*/
import
treeTable
from
'
@/components/TreeTable
'
/**
Auth: Lei.j1ang
Created: 2018/1/19-14:54
*/
import
treeTable
from
'
@/components/TreeTable
'
export
default
{
name
:
'
tree
'
,
components
:
{
treeTable
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录