diff --git a/README.md b/README.md index 030826bb..bca96ea2 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,6 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s - Table - Dynamic Table - Drag And Drop Table - - Tree Table - Inline Edit Table - Error Page diff --git a/README.zh-CN.md b/README.zh-CN.md index 5ca7d989..e2f0db07 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -122,7 +122,6 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s - 表格 - 动态表格 - 拖拽表格 - - 树形表格 - 内联编辑 - 错误页面 diff --git a/src/components/TreeTable/README.md b/src/components/TreeTable/README.md deleted file mode 100644 index 05326dfa..00000000 --- a/src/components/TreeTable/README.md +++ /dev/null @@ -1,220 +0,0 @@ - -- [Enlgish](#Brief) - -# 中文 - -## 写在前面 - -此组件仅提供一个创建 `TreeTable` 的解决思路。它基于`element-ui`的 table 组件实现，通过`el-table`的`row-style`方法，在里面判断元素是否需要隐藏或者显示，从而实现`TreeTable`的展开与收起。 - -并且本组件充分利用 `vue` 插槽的特性来方便用户自定义。 - -`evel.js` 里面，`addAttrs` 方法会给数据添加几个属性，`treeTotable` 会对数组扁平化。这些操作都不会破坏源数据，只是会新增属性。 - -## Props 说明 - -| Attribute | Description | Type | Default | -| :--------------: | :--------------------------------- | :-----: | :------: | -| data | 原始展示数据 | Array | [] | -| columns | 列属性 | Array | [] | -| defaultExpandAll | 默认是否全部展开 | Boolean | false | -| defaultChildren | 指定子树为节点对象的某个属性值 | String | children | | -| indent | 相邻级节点间的水平缩进，单位为像素 | Number | 50 | - -> 任何 `el-table` 的属性都支持，例如`border`、`fit`、`size`或者`@select`、`@cell-click`等方法。详情属性见`el-table`文档。 - ---- - -### 代码示例 - -```html - -``` - -#### data(**必填**) - -```js -const data = [ - { - name:'1' - children: [ - { - name: '1-1' - }, - { - name: '1-2' - } - ] - }, - { - name: `2` - } -] -``` - -#### columns(**必填**) - -- label: 显示在表头的文字 -- key: 对应 data 的 key。treeTable 将显示相应的 value -- expand: `true` or `false`。若为 true，则在该列显示展开收起图标 -- checkbox: `true` or `false`。若为 true，则在该列显示`checkbox` -- width: 每列的宽度，为一个数字(可选)。例如`200` -- align: 对齐方式 `left/center/right` -- header-align: 表头对齐方式 `left/center/right` - -```javascript -const columns = [ - { - label: 'Checkbox', - checkbox: true - }, - { - label: '', - key: 'id', - expand: true - }, - { - label: 'Event', - key: 'event', - width: 200, - align: 'left' - }, - { - label: 'Scope', - key: 'scope' - } -] -``` - -> 树表组件将会根据 columns 的 key 属性生成具名插槽，如果你需要对列数据进行自定义，通过插槽即可实现 - -```html - -``` - -## Events - -目前提供了几个方法，不过只是`beta`版本，之后很可能会修改。 - -```js -this.$refs.TreeTable.addChild(row, data) //添加子元素 -this.$refs.TreeTable.addBrother(row, data) //添加兄弟元素 -this.$refs.TreeTable.delete(row) //删除该元素 -``` - -## 其他 - -如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的 api 自行修改 index.vue - -# English - -## Brief - -This component only provides a solution for creating `TreeTable`. It is based on the `element-ui` table component. It uses the `row-style` method of `el-table` to determine whether the element needs to be hidden or displayed. - -And this component makes full use of the features of the `vue` slot to make it user-friendly. - -In `evel.js`, the `addAttrs` method adds several properties to the data, and `treeTotable` flattens the array. None of these operations will destroy the source data, just add properties. - -## Props - -| Attribute | Description | Type | Default | -| :--------------: | :----------------------------------------------------------- | :-----: | :------: | -| data | original display data | Array | [] | -| columns | column attribute | Array | [] | -| defaultExpandAll | whether to expand all nodes by default | Boolean | false | -| defaultChildren | specify which node object is used as the node's subtree | String | children | | -| indent | horizontal indentation of nodes in adjacent levels in pixels | Number | 50 | - -> Any of the `el-table` properties are supported, such as `border`, `fit`, `size` or `@select`, `@cell-click`. See the ʻel-table` documentation for details. - ---- - -### Example - -```html - -``` - -#### data(**Required**) - -```js -const data = [ - { - name:'1' - children: [ - { - name: '1-1' - }, - { - name: '1-2' - } - ] - }, - { - name: `2` - } -] -``` - -#### columns(**Required**) - -- label: text displayed in the header -- key: data.key will show in column -- expand: `true` or `false` -- checkbox: `true` or `false` -- width: column width 。such as `200` -- align: alignment `left/center/right` -- header-align: alignment of the table header `left/center/right` - -```javascript -const columns = [ - { - label: 'Checkbox', - checkbox: true - }, - { - label: '', - key: 'id', - expand: true - }, - { - label: 'Event', - key: 'event', - width: 200, - align: 'left' - }, - { - label: 'Scope', - key: 'scope' - } -] -``` - -> The tree table component will generate a named slot based on the key property of columns. If you need to customize the column data, you can do it through the slot. - -```html - -``` - -## Events - -Several methods are currently available, but only the `beta` version, which is likely to be modified later. - -```js -this.$refs.TreeTable.addChild(row, data) //Add child elements -this.$refs.TreeTable.addBrother(row, data) //Add a sibling element -this.$refs.TreeTable.delete(row) //Delete the element -``` - -## Other - -If you have other requirements, please refer to the [el-table](http://element-cn.eleme.io/#/en-US/component/table) api to modify the index.vue diff --git a/src/components/TreeTable/eval.js b/src/components/TreeTable/eval.js deleted file mode 100644 index 8659ead8..00000000 --- a/src/components/TreeTable/eval.js +++ /dev/null @@ -1,48 +0,0 @@ -import Vue from 'vue' - -// Flattened array -export default function treeToArray(data, children = 'children') { - let tmp = [] - data.forEach((item, index) => { - Vue.set(item, '_index', index) - tmp.push(item) - if (item[children] && item[children].length > 0) { - const res = treeToArray(item[children], children) - tmp = tmp.concat(res) - } - }) - return tmp -} - -export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) { - data.forEach((item, index) => { - const _id = (preIndex ? `${preIndex}-${index}` : index) + '' - Vue.set(item, '_id', _id) - Vue.set(item, '_level', level) - Vue.set(item, '_expand', expand) - Vue.set(item, '_parent', parent) - Vue.set(item, '_show', show) - Vue.set(item, '_select', select) - if (item[children] && item[children].length > 0) { - addAttrs(item[children], { - parent: item, - level: level + 1, - expand, - preIndex: _id, - children, - status, - select - }) - } - }) -} - -export function cleanParentAttr(data, children = 'children') { - data.forEach(item => { - item._parent = null - if (item[children] && item[children].length > 0) { - addAttrs(item[children], children) - } - }) - return data -} diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue deleted file mode 100644 index 92ddc434..00000000 --- a/src/components/TreeTable/index.vue +++ /dev/null @@ -1,193 +0,0 @@ - - - - - diff --git a/src/lang/en.js b/src/lang/en.js index 2eae4bf0..ef4548e7 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -43,8 +43,6 @@ export default { dragTable: 'Drag Table', inlineEditTable: 'Inline Edit', complexTable: 'Complex Table', - treeTable: 'Tree Table', - customTreeTable: 'Custom TreeTable', tab: 'Tab', form: 'Form', createArticle: 'Create Article', diff --git a/src/lang/es.js b/src/lang/es.js index 9ae6c50c..89a9e9d3 100755 --- a/src/lang/es.js +++ b/src/lang/es.js @@ -43,8 +43,6 @@ export default { dragTable: 'Arrastrar tabla', inlineEditTable: 'Editor', complexTable: 'Complex Table', - treeTable: 'Tree Table', - customTreeTable: 'Custom TreeTable', tab: 'Pestaña', form: 'Formulario', createArticle: 'Crear artículo', diff --git a/src/lang/zh.js b/src/lang/zh.js index 86d720b0..702725cd 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -43,8 +43,6 @@ export default { dragTable: '拖拽Table', inlineEditTable: 'Table内编辑', complexTable: '综合Table', - treeTable: '树形表格', - customTreeTable: '自定义树表', tab: 'Tab', form: '表单', createArticle: '创建文章', diff --git a/src/router/index.js b/src/router/index.js index 3132452b..a861067a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -10,7 +10,6 @@ import Layout from '@/layout/Layout' import componentsRouter from './modules/components' import chartsRouter from './modules/charts' import tableRouter from './modules/table' -import treeTableRouter from './modules/tree-table' import nestedRouter from './modules/nested' /** note: sub-menu only appear when children.length>=1 @@ -175,7 +174,6 @@ export const asyncRoutes = [ chartsRouter, nestedRouter, tableRouter, - treeTableRouter, { path: '/example', diff --git a/src/router/modules/tree-table.js b/src/router/modules/tree-table.js deleted file mode 100644 index 3996e08c..00000000 --- a/src/router/modules/tree-table.js +++ /dev/null @@ -1,29 +0,0 @@ -/** When your routing table is too long, you can split it into small modules**/ - -import Layout from '@/layout/Layout' - -const treeTableRouter = { - path: '/tree-table', - component: Layout, - redirect: '/table/complex-table', - name: 'TreeTable', - meta: { - title: 'treeTable', - icon: 'tree-table' - }, - children: [ - { - path: 'index', - component: () => import('@/views/tree-table/index'), - name: 'TreeTableDemo', - meta: { title: 'treeTable' } - }, - { - path: 'custom', - component: () => import('@/views/tree-table/custom'), - name: 'CustomTreeTableDemo', - meta: { title: 'customTreeTable' } - } - ] -} -export default treeTableRouter diff --git a/src/views/tree-table/custom/data.js b/src/views/tree-table/custom/data.js deleted file mode 100644 index 020f6247..00000000 --- a/src/views/tree-table/custom/data.js +++ /dev/null @@ -1,51 +0,0 @@ -const data = [ - { - name: '1', - timeLine: 100, - children: [ - { - name: '1-1', - timeLine: 20 - }, - { - name: '1-2', - timeLine: 60, - children: [ - { - name: '1-2-1', - timeLine: 35 - }, - { - name: '1-2-2', - timeLine: 25 - } - ] - } - ] - }, - { - name: '2', - timeLine: 80, - children: [ - { - name: '2-1', - timeLine: 30 - }, - { - name: '2-2', - timeLine: 50 - }, - { - name: '2-3', - timeLine: 60 - } - ] - }, - { - name: '3', - timeLine: 40 - } -] - -export default data - diff --git a/src/views/tree-table/custom/index.vue b/src/views/tree-table/custom/index.vue deleted file mode 100644 index 754ec202..00000000 --- a/src/views/tree-table/custom/index.vue +++ /dev/null @@ -1,159 +0,0 @@ - - - diff --git a/src/views/tree-table/data.js b/src/views/tree-table/data.js deleted file mode 100644 index 67b0137a..00000000 --- a/src/views/tree-table/data.js +++ /dev/null @@ -1,80 +0,0 @@ - -const data = [ - { - id: 0, - event: 'Event-0', - timeLine: 50 - }, - { - id: 1, - event: 'Event-1', - timeLine: 100, - children: [ - { - id: 2, - event: 'Event-2', - timeLine: 10 - - }, - { - id: 3, - event: 'Event-3', - timeLine: 90, - children: [ - { - id: 4, - event: 'Event-4', - timeLine: 5 - - }, - { - id: 5, - event: 'Event-5', - timeLine: 10 - - }, - { - id: 6, - event: 'Event-6', - timeLine: 75, - - children: [ - { - id: 7, - event: 'Event-7', - timeLine: 50, - - children: [ - { - id: 71, - event: 'Event-7-1', - timeLine: 25 - - }, - { - id: 72, - event: 'Event-7-2', - timeLine: 5 - - }, - { - id: 73, - event: 'Event-7-3', - timeLine: 20 - } - ] - }, - { - id: 8, - event: 'Event-8', - timeLine: 25 - } - ] - } - ] - } - ] - } -] - -export default data diff --git a/src/views/tree-table/index.vue b/src/views/tree-table/index.vue deleted file mode 100644 index 87b4bc5c..00000000 --- a/src/views/tree-table/index.vue +++ /dev/null @@ -1,126 +0,0 @@ - - - - -