修改treeTable相关 (#422)

* 1.删除无用的属性
2.修改readme
3.修改eval.js,给后两个参数设置默认值

* update readme
This commit is contained in:
Zenon 2018-01-24 10:33:05 +08:00 committed by 花裤衩
parent bc01171466
commit 2e0d3fd0e4
3 changed files with 25 additions and 15 deletions

View file

@ -4,7 +4,7 @@
*/ */
'use strict' 'use strict'
import Vue from 'vue' import Vue from 'vue'
export default function treeToArray(data, expandedAll, parent, level) { export default function treeToArray(data, expandedAll, parent = null, level = null) {
let tmp = [] let tmp = []
Array.from(data).forEach(function(record) { Array.from(data).forEach(function(record) {
if (record._expanded === undefined) { if (record._expanded === undefined) {

View file

@ -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

View file

@ -1,8 +1,8 @@
## 写在前面 ## 写在前面
此组件仅提供一个创建TreeTable的解决方案 此组件仅提供一个创建TreeTable的解决思路
## prop说明 ## prop说明
### data #### *data*
**必填** **必填**
原始数据,要求是一个数组或者对象 原始数据,要求是一个数组或者对象
@ -35,13 +35,16 @@
} }
``` ```
### columns #### columns
列属性,要求是一个数组 列属性,要求是一个数组
1. text: 显示在表头 1. text: 显示在表头的文字
2. value: 对应data的keytreeTable将显示相应的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 @@
}] }]
``` ```
### 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