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
HireTest
VueElementTemplate
Commits
2e0d3fd0
Commit
2e0d3fd0
authored
Jan 24, 2018
by
Zenon
Committed by
花裤衩
Jan 24, 2018
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改treeTable相关 (#422)
* 1.删除无用的属性 2.修改readme 3.修改eval.js,给后两个参数设置默认值 * update readme
parent
bc011714
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
25 additions
and
15 deletions
+25
-15
eval.js
src/components/TreeTable/eval.js
+1
-1
index.vue
src/components/TreeTable/index.vue
+0
-1
readme.md
src/components/TreeTable/readme.md
+24
-13
No files found.
src/components/TreeTable/eval.js
View file @
2e0d3fd0
...
...
@@ -4,7 +4,7 @@
*/
'use strict'
import
Vue
from
'vue'
export
default
function
treeToArray
(
data
,
expandedAll
,
parent
,
leve
l
)
{
export
default
function
treeToArray
(
data
,
expandedAll
,
parent
=
null
,
level
=
nul
l
)
{
let
tmp
=
[]
Array
.
from
(
data
).
forEach
(
function
(
record
)
{
if
(
record
.
_expanded
===
undefined
)
{
...
...
src/components/TreeTable/index.vue
View file @
2e0d3fd0
...
...
@@ -33,7 +33,6 @@ import treeToArray from './eval'
export
default
{
name
:
'treeTable'
,
props
:
{
a
:
1
,
data
:
{
type
:
[
Array
,
Object
],
required
:
true
...
...
src/components/TreeTable/readme.md
View file @
2e0d3fd0
## 写在前面
此组件仅提供一个创建TreeTable的解决
方案
此组件仅提供一个创建TreeTable的解决
思路
## prop说明
###
data
###
# *data*
**必填**
原始数据,要求是一个数组或者对象
...
...
@@ -35,13 +35,16 @@
}
```
### columns
###
#
columns
列属性,要求是一个数组
1.
text: 显示在表头
2.
value: 对应data的key,treeTable将显示相应的value
3.
width: 每列的宽度,为一个数字
1.
text: 显示在表头的文字
2.
value: 对应data的key。treeTable将显示相应的value
3.
width: 每列的宽度,为一个数字(可选)
如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
如果你有几个字段是需要自定义的,几个不需要,那么可以将不需要自定义的字段放入columns,将需要自定义的内容放入到slot中,详情见后文
```javascript
[{
value:string,
...
...
@@ -54,25 +57,33 @@
}]
```
### expandAll
###
#
expandAll
是否默认全部展开,boolean值,默认为false
### evalFunc
###
#
evalFunc
解析函数,function,非必须
如果不提供,将使用默认的
evalFunc
如果不提供,将使用默认的
[
evalFunc
](
./eval.js
)
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考
此目录下的
*eval.js*
如果提供了evalFunc,那么会用提供的evalFunc去解析data,并返回treeTable渲染所需要的值。如何编写一个evalFunc,请参考
[
*eval.js*
](
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js
)
或
[
*customEval.js*
](
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js
)
### evalArgs
###
#
evalArgs
解析函数的参数,是一个数组
**请注意,自定义的解析函数参数第一个为this.data,你不需要在evalArgs填写。**
**请注意,自定义的解析函数参数第一个为this.data,你不需要在evalArgs填写。**
*this.data为需要解析的数据*
如你的解析函数需要的参数为
`(this.data,1,2,3,4)`
,那么你只需要将
`[1,2,3,4]`
赋值给
`evalArgs`
就可以了
如果你的解析函数参数只有一个
`(this.data)`
,那么就可以不用填写evalArgs了
具体可参考
[
*customEval.js*
](
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customEval.js
)
的函数参数和
[
customTreeTable
](
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue
)
的
`evalArgs`
属性值
## slot
请参考
`customTreeTable`
这是一个自定义列的插槽。
默认情况下,treeTable只有一行行展示数据的功能。但是一般情况下,我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式,这时我们就需要自定义列了。请参考
[
customTreeTable
](
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/example/table/treeTable/customTreeTable.vue
)
,
[
实例效果
](
http://panjiachen.github.io/vue-element-admin/#/example/table/custom-tree-table
)
`slot`
和
`columns属性`
可同时存在,columns里面的数据列会在slot自定义列的左边展示
## 其他
如果有其他的需求,请参考
[
el-table
](
http://element-cn.eleme.io/#/en-US/component/table
)
的api自行修改index.vue
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