From 1610945813a2b3066cce30153bb53f7d13bc3298 Mon Sep 17 00:00:00 2001 From: Zenon Date: Tue, 23 Jan 2018 14:44:47 +0800 Subject: [PATCH] feat[treeTable]: add treeTable (#415)(#319) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 1.增加treeTable 2.增加两个treeTable的demo * 1.增加treeTable的使用功能说明 * 优化代码，去除console * 修复bug * 修复marLTemp变量未清空的bug * 修复marLTemp变量未清空的bug * 修复marLTemp变量未清空的bug * 修改customTree，使其展示无columns时的功能 --- src/components/TreeTable/eval.js | 29 ++++ src/components/TreeTable/index.vue | 120 ++++++++++++++++ src/components/TreeTable/readme.md | 73 ++++++++++ src/lang/en.js | 2 + src/lang/zh.js | 2 + src/router/index.js | 4 +- .../example/table/treeTable/customEval.js | 48 +++++++ .../table/treeTable/customTreeTable.vue | 131 ++++++++++++++++++ .../example/table/treeTable/treeTable.vue | 121 ++++++++++++++++ 9 files changed, 529 insertions(+), 1 deletion(-) create mode 100644 src/components/TreeTable/eval.js create mode 100644 src/components/TreeTable/index.vue create mode 100644 src/components/TreeTable/readme.md create mode 100644 src/views/example/table/treeTable/customEval.js create mode 100644 src/views/example/table/treeTable/customTreeTable.vue create mode 100644 src/views/example/table/treeTable/treeTable.vue diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js new file mode 100644 index 00000000..ffbe98aa --- /dev/null +++ b/src/components/TreeTable/eval.js @@ -0,0 +1,29 @@ +/** +* @Author: jianglei +* @Date: 2017-10-12 12:06:49 +*/ +'use strict' +import Vue from 'vue' +export default function treeToArray(data, expandedAll, parent, level) { + let tmp = [] + Array.from(data).forEach(function(record) { + if (record._expanded === undefined) { + Vue.set(record, '_expanded', expandedAll) + } + let _level = 1 + if (level !== undefined && level !== null) { + _level = level + 1 + } + Vue.set(record, '_level', _level) + // 如果有父元素 + if (parent) { + Vue.set(record, 'parent', parent) + } + tmp.push(record) + if (record.children && record.children.length > 0) { + const children = treeToArray(record.children, expandedAll, record, _level) + tmp = tmp.concat(children) + } + }) + return tmp +} diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue new file mode 100644 index 00000000..bed52aa5 --- /dev/null +++ b/src/components/TreeTable/index.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/components/TreeTable/readme.md b/src/components/TreeTable/readme.md new file mode 100644 index 00000000..790e7a0d --- /dev/null +++ b/src/components/TreeTable/readme.md @@ -0,0 +1,73 @@ +## 写在前面 +此组件仅提供一个创建TreeTable的解决方案 +##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: 每列的宽度，为一个数字 + 如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便 + ```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` + + ## 其他 + 如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue \ No newline at end of file diff --git a/src/lang/en.js b/src/lang/en.js index b243b0a5..22f5606a 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -28,6 +28,8 @@ export default { dragTable: 'Drag Table', inlineEditTable: 'Inline Edit', complexTable: 'Complex Table', + treeTable: 'treeTable', + customTreeTable: 'Custom TreeTable', tab: 'Tab', form: 'Form', createForm: 'Create Form', diff --git a/src/lang/zh.js b/src/lang/zh.js index 4dd83533..c465cfee 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -28,6 +28,8 @@ export default { dragTable: '拖拽table', inlineEditTable: 'table内编辑', complexTable: '综合table', + treeTable: '树表', + customTreeTable: '自定义树表', tab: 'Tab', form: '表单', createForm: '创建表单', diff --git a/src/router/index.js b/src/router/index.js index bdb31816..85f961ec 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -151,7 +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: '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: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }} diff --git a/src/views/example/table/treeTable/customEval.js b/src/views/example/table/treeTable/customEval.js new file mode 100644 index 00000000..6eac3928 --- /dev/null +++ b/src/views/example/table/treeTable/customEval.js @@ -0,0 +1,48 @@ +/** +* @Author: jianglei +* @Date: 2017-10-12 12:06:49 +*/ +'use strict' +import Vue from 'vue' +export default function treeToArray(data, parent, level, expandedAll, item) { + const marLTemp = [] + let tmp = [] + Array.from(data).forEach(function(record) { + if (record._expanded === undefined) { + Vue.set(record, '_expanded', expandedAll) + } + let _level = 1 + if (level !== undefined && level !== null) { + _level = level + 1 + } + Vue.set(record, '_level', _level) + // 如果有父元素 + if (parent) { + Vue.set(record, 'parent', parent) + // 如果父元素有偏移量，需要计算在this的偏移量中 + // 偏移量还与前面同级元素有关，需要加上前面所有元素的长度和 + if (!marLTemp[_level]) { + marLTemp[_level] = 0 + } + Vue.set(record, '_marginLeft', marLTemp[_level] + parent._marginLeft) + Vue.set(record, '_width', record[item] / parent[item] * parent._width) + // 在本次计算过偏移量后加上自己长度，以供下一个元素使用 + marLTemp[_level] += record._width + } else { + // 如果为根 + // 初始化偏移量存储map + marLTemp[record.id] = [] + // map中是一个数组，存储的是每级的长度和 + // 初始情况下为0 + marLTemp[record.id][_level] = 0 + Vue.set(record, '_marginLeft', 0) + Vue.set(record, '_width', 1) + } + tmp.push(record) + if (record.children && record.children.length > 0) { + const children = treeToArray(record.children, record, _level, expandedAll, item) + tmp = tmp.concat(children) + } + }) + return tmp +} diff --git a/src/views/example/table/treeTable/customTreeTable.vue b/src/views/example/table/treeTable/customTreeTable.vue new file mode 100644 index 00000000..e94c44de --- /dev/null +++ b/src/views/example/table/treeTable/customTreeTable.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/views/example/table/treeTable/treeTable.vue b/src/views/example/table/treeTable/treeTable.vue new file mode 100644 index 00000000..b696116f --- /dev/null +++ b/src/views/example/table/treeTable/treeTable.vue @@ -0,0 +1,121 @@ + + +