Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄瑜
VueElementTemplate
Commits
3253a91a
Commit
3253a91a
authored
Jan 23, 2018
by
Pan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
format[treeTable]: format code
parent
fea6e5fe
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
100 additions
and
103 deletions
+100
-103
index.vue
src/components/TreeTable/index.vue
+27
-32
readme.md
src/components/TreeTable/readme.md
+35
-30
index.js
src/router/index.js
+3
-3
customTreeTable.vue
src/views/example/table/treeTable/customTreeTable.vue
+28
-31
treeTable.vue
src/views/example/table/treeTable/treeTable.vue
+7
-7
No files found.
src/components/TreeTable/index.vue
View file @
3253a91a
...
...
@@ -2,23 +2,18 @@
<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)"
>
<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"
>
<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)"
>
<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>
...
...
@@ -30,10 +25,10 @@
</template>
<
script
>
/**
/**
Auth: Lei.j1ang
Created: 2018/1/19-13:59
*/
*/
import
treeToArray
from
'./eval'
export
default
{
name
:
'treeTable'
,
...
...
src/components/TreeTable/readme.md
View file @
3253a91a
## 写在前面
此组件仅提供一个创建TreeTable的解决方案
##prop说明
###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
}]
}
```
...
...
@@ -66,6 +70,7 @@
**请注意,自定义的解析函数参数第一个为this.data,你不需要在evalArgs填写。**
如你的解析函数需要的参数为
`(this.data,1,2,3,4)`
,那么你只需要将
`[1,2,3,4]`
赋值给
`evalArgs`
就可以了
## slot
请参考
`customTreeTable`
...
...
src/router/index.js
View file @
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
View file @
3253a91a
...
...
@@ -10,7 +10,7 @@
<
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',
<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>
...
...
@@ -28,12 +28,13 @@
</template>
<
script
>
/**
/**
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
View file @
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'
*/
import
treeTable
from
'@/components/TreeTable'
export
default
{
name
:
'tree'
,
components
:
{
treeTable
},
...
...
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