Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
A
admin-fe
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container Registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Pleroma
admin-fe
Commits
2e0d3fd0
Commit
2e0d3fd0
authored
7 years ago
by
Zenon
Committed by
花裤衩
7 years ago
Browse files
Options
Downloads
Patches
Plain Diff
修改treeTable相关 (#422)
* 1.删除无用的属性 2.修改readme 3.修改eval.js,给后两个参数设置默认值 * update readme
parent
bc011714
No related branches found
Branches containing commit
No related tags found
Tags containing commit
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
src/components/TreeTable/eval.js
+1
-1
1 addition, 1 deletion
src/components/TreeTable/eval.js
src/components/TreeTable/index.vue
+0
-1
0 additions, 1 deletion
src/components/TreeTable/index.vue
src/components/TreeTable/readme.md
+24
-13
24 additions, 13 deletions
src/components/TreeTable/readme.md
with
25 additions
and
15 deletions
src/components/TreeTable/eval.js
+
1
−
1
View file @
2e0d3fd0
...
@@ -4,7 +4,7 @@
...
@@ -4,7 +4,7 @@
*/
*/
'
use strict
'
'
use strict
'
import
Vue
from
'
vue
'
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
=
[]
let
tmp
=
[]
Array
.
from
(
data
).
forEach
(
function
(
record
)
{
Array
.
from
(
data
).
forEach
(
function
(
record
)
{
if
(
record
.
_expanded
===
undefined
)
{
if
(
record
.
_expanded
===
undefined
)
{
...
...
This diff is collapsed.
Click to expand it.
src/components/TreeTable/index.vue
+
0
−
1
View file @
2e0d3fd0
...
@@ -33,7 +33,6 @@ import treeToArray from './eval'
...
@@ -33,7 +33,6 @@ import treeToArray from './eval'
export
default
{
export
default
{
name
:
'
treeTable
'
,
name
:
'
treeTable
'
,
props
:
{
props
:
{
a
:
1
,
data
:
{
data
:
{
type
:
[
Array
,
Object
],
type
:
[
Array
,
Object
],
required
:
true
required
:
true
...
...
This diff is collapsed.
Click to expand it.
src/components/TreeTable/readme.md
+
24
−
13
View file @
2e0d3fd0
## 写在前面
## 写在前面
此组件仅提供一个创建TreeTable的解决
方案
此组件仅提供一个创建TreeTable的解决
思路
## prop说明
## prop说明
###
data
###
# *
data
*
**必填**
**必填**
原始数据,要求是一个数组或者对象
原始数据,要求是一个数组或者对象
...
@@ -35,13 +35,16 @@
...
@@ -35,13 +35,16 @@
}
}
```
```
### columns
###
#
columns
列属性,要求是一个数组
列属性,要求是一个数组
1.
text: 显示在表头
1.
text: 显示在表头的文字
2.
value: 对应data的key,treeTable将显示相应的value
2.
value: 对应data的key。treeTable将显示相应的value
3.
width: 每列的宽度,为一个数字
3.
width: 每列的宽度,为一个数字(可选)
如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
如果你想要每个字段都有自定义的样式或者嵌套其他组件,columns可不提供,直接像在el-table一样写即可,如果没有自定义内容,提供columns将更加的便捷方便
如果你有几个字段是需要自定义的,几个不需要,那么可以将不需要自定义的字段放入columns,将需要自定义的内容放入到slot中,详情见后文
```
javascript
```
javascript
[{
[{
value
:
string
,
value
:
string
,
...
@@ -54,25 +57,33 @@
...
@@ -54,25 +57,33 @@
}]
}]
```
```
### expandAll
###
#
expandAll
是否默认全部展开,boolean值,默认为false
是否默认全部展开,boolean值,默认为false
### evalFunc
###
#
evalFunc
解析函数,function,非必须
解析函数,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,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
## 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
如果有其他的需求,请参考
[
el-table
](
http://element-cn.eleme.io/#/en-US/component/table
)
的api自行修改index.vue
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment