diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue index bed52aa5d8d14aaa5c3baa8351e15ea57eb322a7..0f7e51b005ecd9b9d0c26c33ea8f554ecd9a94b0 100644 --- a/src/components/TreeTable/index.vue +++ b/src/components/TreeTable/index.vue @@ -1,39 +1,34 @@ <template> - <el-table :data="formatData" :row-style="showRow"> - <el-table-column v-if="columns.length===0" width="150"> - <template slot-scope="scope"> - <span v-for="space in scope.row._level" - class="ms-tree-space"></span> - <span class="tree-ctrl" v-if="iconShow(0,scope.row)" - @click="toggleExpanded(scope.$index)"> - <i v-if="!scope.row._expanded" class="el-icon-plus"></i> - <i v-else class="el-icon-minus"></i> - </span> - {{scope.$index}} - </template> - </el-table-column> - <el-table-column v-else v-for="(column, index) in columns" :key="column.value" - :label="column.text" :width="column.width"> - <template slot-scope="scope"> - <span v-if="index === 0" v-for="space in scope.row._level" - class="ms-tree-space"></span> - <span class="tree-ctrl" v-if="iconShow(index,scope.row)" - @click="toggleExpanded(scope.$index)"> - <i v-if="!scope.row._expanded" class="el-icon-plus"></i> - <i v-else class="el-icon-minus"></i> - </span> - {{scope.row[column.value]}} - </template> - </el-table-column> - <slot></slot> - </el-table> + <el-table :data="formatData" :row-style="showRow"> + <el-table-column v-if="columns.length===0" width="150"> + <template slot-scope="scope"> + <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> + <span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)"> + <i v-if="!scope.row._expanded" class="el-icon-plus"></i> + <i v-else class="el-icon-minus"></i> + </span> + {{scope.$index}} + </template> + </el-table-column> + <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width"> + <template slot-scope="scope"> + <span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> + <span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)"> + <i v-if="!scope.row._expanded" class="el-icon-plus"></i> + <i v-else class="el-icon-minus"></i> + </span> + {{scope.row[column.value]}} + </template> + </el-table-column> + <slot></slot> + </el-table> </template> <script> - /** - Auth: Lei.j1ang - Created: 2018/1/19-13:59 - */ +/** + Auth: Lei.j1ang + Created: 2018/1/19-13:59 +*/ import treeToArray from './eval' export default { name: 'treeTable', diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md index 790e7a0dd4a7d25cc7947750e8cf43b57529018e..09bd2c128362287bdbb414dcf268c4d97c1b8d39 100644 --- a/src/components/TreeTable/readme.md +++ b/src/components/TreeTable/readme.md @@ -1,39 +1,43 @@ ## 写在å‰é¢ æ¤ç»„件仅æ供一个创建TreeTable的解决方案 + ##prop说明 -###data - 必输 - +###data + **å¿…å¡«** + 原始数æ®,è¦æ±‚是一个数组或者对象 ```javascript - [{ - key1:value1, - key2:value2, - children:[{ - key1:value1 - },{ - key1:value1 + [{ + key1: value1, + key2: value2, + children: [{ + key1: value1 + }, + { + key1: value1 + }] + }, + { + key1: value1 }] - },{ - key1:value1 - }] ``` 或者 ```javascript { - key1:value1, - key2:value2, - children:[{ - key1:value1 - },{ - key1:value1 + key1: value1, + key2: value2, + children: [{ + key1: value1 + }, + { + key1: value1 }] } ``` - + ###columns 列属性,è¦æ±‚是一个数组 - + 1. text: 显示在表头 2. value: 对应dataçš„key,treeTable将显示相应的value 3. width: æ¯åˆ—çš„å®½åº¦ï¼Œä¸ºä¸€ä¸ªæ•°å— @@ -49,25 +53,26 @@ width:number }] ``` - + ### expandAll 是å¦é»˜è®¤å…¨éƒ¨å±•å¼€ï¼Œboolean值,默认为false ### evalFunc 解æžå‡½æ•°ï¼Œfunction,éžå¿…é¡» - - 如果ä¸æ供,将使用默认的evalFunc - + + 如果ä¸æ供,将使用默认的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` - + ## 其他 - 如果有其他的需求,请å‚考[el-table](http://element-cn.eleme.io/#/en-US/component/table)çš„api自行修改index.vue \ No newline at end of file + 如果有其他的需求,请å‚考[el-table](http://element-cn.eleme.io/#/en-US/component/table)çš„api自行修改index.vue diff --git a/src/router/index.js b/src/router/index.js index 85f961ecd010076da011911d3dc4980fdeeb6664..d93f0fed04521dad8b4a077d1736a6d28ac7ed2a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -151,9 +151,9 @@ export const asyncRouterMap = [ { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }}, { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }}, { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }}, - { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}, - { path: 'treeTable', component: _import('example/table/treeTable/treeTable'), name: 'treeTable', meta: { title: 'treeTable' }}, - { path: 'customTreeTable', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTable', meta: { title: 'customTreeTable' }} + { path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTable', meta: { title: 'treeTable' }}, + { path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTable', meta: { title: 'customTreeTable' }}, + { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }} ] }, { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }} diff --git a/src/views/example/table/treeTable/customTreeTable.vue b/src/views/example/table/treeTable/customTreeTable.vue index e94c44de944691e17bbe1cc74d72cea810cc2244..22081df6ddbb890bcda67ef0386e19354deaa362 100644 --- a/src/views/example/table/treeTable/customTreeTable.vue +++ b/src/views/example/table/treeTable/customTreeTable.vue @@ -1,39 +1,40 @@ <template> - <tree-table :data="data" :evalFunc="func" :evalArgs="args"> - <el-table-column label="事件"> - <template slot-scope="scope"> - <span style="color:sandybrown">{{scope.row.event}}</span> - <el-tag>{{scope.row.timeLine+'ms'}}</el-tag> - </template> - </el-table-column> - <el-table-column label="时间线"> - <template slot-scope="scope"> - <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left"> - <div class="processContainer"> - <div class="process" :style= "{ width:scope.row._width * 500+'px', + <tree-table :data="data" :evalFunc="func" :evalArgs="args"> + <el-table-column label="事件"> + <template slot-scope="scope"> + <span style="color:sandybrown">{{scope.row.event}}</span> + <el-tag>{{scope.row.timeLine+'ms'}}</el-tag> + </template> + </el-table-column> + <el-table-column label="时间线"> + <template slot-scope="scope"> + <el-tooltip effect="dark" :content="scope.row.timeLine+'ms'" placement="left"> + <div class="processContainer"> + <div class="process" :style="{ width:scope.row._width * 500+'px', background:scope.row._width>0.5?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)', marginLeft:scope.row._marginLeft * 500+'px' }"> - <span style="display:inline-block"></span> - </div> + <span style="display:inline-block"></span> </div> - </el-tooltip> - </template> - </el-table-column> - <el-table-column label="æ“作" width="200"> - <template slot-scope="scope"> - <el-button type="text" @click="message(scope.row)">点击</el-button> - </template> - </el-table-column> - </tree-table> + </div> + </el-tooltip> + </template> + </el-table-column> + <el-table-column label="æ“作" width="200"> + <template slot-scope="scope"> + <el-button type="text" @click="message(scope.row)">点击</el-button> + </template> + </el-table-column> + </tree-table> </template> <script> - /** - Auth: Lei.j1ang - Created: 2018/1/19-14:54 - */ +/** + Auth: Lei.j1ang + Created: 2018/1/19-14:54 +*/ import treeTable from '@/components/TreeTable' import treeToArray from './customEval' + export default { name: 'tree', components: { treeTable }, @@ -125,7 +126,3 @@ export default { } } </script> - -<style scoped> - -</style> diff --git a/src/views/example/table/treeTable/treeTable.vue b/src/views/example/table/treeTable/treeTable.vue index b696116fb003ddea705a8e264bf49d1210ca84cd..90fa9342282c5e98cbe98b1a917bc04d7e9a1d97 100644 --- a/src/views/example/table/treeTable/treeTable.vue +++ b/src/views/example/table/treeTable/treeTable.vue @@ -1,14 +1,14 @@ <template> - <tree-table :data="data" :columns="columns"> - </tree-table> + <tree-table :data="data" :columns="columns"></tree-table> </template> <script> - /** - Auth: Lei.j1ang - Created: 2018/1/19-14:54 - */ - import treeTable from '@/components/TreeTable' +/** + Auth: Lei.j1ang + Created: 2018/1/19-14:54 +*/ +import treeTable from '@/components/TreeTable' + export default { name: 'tree', components: { treeTable },