diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue index f0a9cb06..34eec3bb 100644 --- a/src/components/TreeTable/index.vue +++ b/src/components/TreeTable/index.vue @@ -32,7 +32,10 @@ export default { name: 'tree-table', props: { - data: [Object, Array], + data: { + type: [Array, Object], + required: true + }, columns: { type: Array, required: true @@ -47,9 +50,11 @@ export default { computed: { // 格式化数据源 formatData: function() { + if (!Array.isArray(this.data)) { + this.data = [this.data] + } const func = this.evalFunc || treeToArray const args = this.evalArgs ? Array.concat([this.data], this.evalArgs) : [this.data, this.expandAll] - console.log(args) return func.apply(null, args) } }, diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md new file mode 100644 index 00000000..6de5d939 --- /dev/null +++ b/src/components/TreeTable/readme.md @@ -0,0 +1,66 @@ +##prop说明 +###data + 必输 + + 原始数据,要求是一个数组或者对象 + ```javascript + [{ + key1:value1, + key2:value2, + children:[{ + key1:value1 + },{ + key1:value1 + }] + },{ + key1:value1 + }] + ``` + 或者 + ```javascript + { + key1:value1, + key2:value2, + children:[{ + key1:value1 + },{ + key1:value1 + }] + } + ``` +###columns + 必输 + + 列属性,要求是一个数组 + + 1. text: 显示在表头 + 2. value: 对应data的key,treeTable将显示相应的value + 3. width: 每列的宽度,为一个数字 + ```javascript + [{ + value:string, + text:string, + width:number + },{ + value:string, + text:string, + width:number + }] + ``` +### expandAll + 是否默认全部展开,boolean值,默认为false +### evalFunc + 解析函数,function,非必须 + + 如果不提供,将使用默认的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` \ No newline at end of file