From 2e0d3fd0e4a8a1fddbc0b8693b6b6138bf52d08b Mon Sep 17 00:00:00 2001 From: Zenon <jianglei19940909@126.com> Date: Wed, 24 Jan 2018 10:33:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9treeTable=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=20(#422)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 1.åˆ é™¤æ— ç”¨çš„å±žæ€§ 2.修改readme 3.修改eval.js,给åŽä¸¤ä¸ªå‚数设置默认值 * update readme --- src/components/TreeTable/eval.js | 2 +- src/components/TreeTable/index.vue | 1 - src/components/TreeTable/readme.md | 37 +++++++++++++++++++----------- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js index ffbe98aa..dfaac808 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 6146c76a..4ec22447 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 2efa9b77..1db26006 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 -- GitLab