diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js index ffbe98aa4350a521d55f5d1a55720c1ac7f5d2db..dfaac808992c85e61fe14a87216ea9c792ff6b10 100644 --- a/src/components/TreeTable/eval.js +++ b/src/components/TreeTable/eval.js @@ -4,7 +4,7 @@ */ 'use strict' import Vue from 'vue' -export default function treeToArray(data, expandedAll, parent, level) { +export default function treeToArray(data, expandedAll, parent = null, level = null) { let tmp = [] Array.from(data).forEach(function(record) { if (record._expanded === undefined) { diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue index 6146c76a386c8e2196c438a277ac0b4955117615..4ec22447d27ba000be60d4ba0c18141bd1273a66 100644 --- a/src/components/TreeTable/index.vue +++ b/src/components/TreeTable/index.vue @@ -33,7 +33,6 @@ import treeToArray from './eval' export default { name: 'treeTable', props: { - a: 1, data: { type: [Array, Object], required: true diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md index 2efa9b77133c065d9ad7ba56622756a1fbfed271..1db26006712e0707088a5ce8da4204e700312488 100644 --- a/src/components/TreeTable/readme.md +++ b/src/components/TreeTable/readme.md @@ -1,8 +1,8 @@ ## 写在å‰é¢ -æ¤ç»„ä»¶ä»…æä¾›ä¸€ä¸ªåˆ›å»º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