mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-09-06 01:09:48 +08:00
remove tree-table
This commit is contained in:
Pan
parent
13c55e59b3
commit
52b4a306aa
@ -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
|
||||
|
||||
@ -122,7 +122,6 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
|
||||
- 表格
|
||||
- 动态表格
|
||||
- 拖拽表格
|
||||
- 树形表格
|
||||
- 内联编辑
|
||||
|
||||
- 错误页面
|
||||
|
||||
@ -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
|
||||
<tree-table :data="data" :columns="columns" border>
|
||||
```
|
||||
|
||||
#### 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
|
||||
<template slot="your key" slot-scope="{scope}">
|
||||
<el-tag>level: {{ scope.row._level }}</el-tag>
|
||||
<el-tag>expand: {{ scope.row._expand }}</el-tag>
|
||||
<el-tag>select: {{ scope.row._select }}</el-tag>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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
|
||||
<tree-table :data="data" :columns="columns" border>
|
||||
```
|
||||
|
||||
#### 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
|
||||
<template slot="your key" slot-scope="{scope}">
|
||||
<el-tag>level: {{ scope.row._level }}</el-tag>
|
||||
<el-tag>expand: {{ scope.row._expand }}</el-tag>
|
||||
<el-tag>select: {{ scope.row._select }}</el-tag>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 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
|
||||
@ -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
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
<template>
|
||||
<el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">
|
||||
<slot name="selection" />
|
||||
<slot name="pre-column" />
|
||||
<el-table-column
|
||||
v-for="item in columns"
|
||||
:key="item.key"
|
||||
:label="item.label"
|
||||
:width="item.width"
|
||||
:align="item.align||'center'"
|
||||
:header-align="item.headerAlign"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<slot :scope="scope" :name="item.key">
|
||||
<template v-if="item.expand">
|
||||
<span :style="{'padding-left':+scope.row._level*indent + 'px'} " />
|
||||
<span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row._expand" class="el-icon-plus" />
|
||||
<i v-else class="el-icon-minus" />
|
||||
</span>
|
||||
</template>
|
||||
<template v-if="item.checkbox">
|
||||
<el-checkbox
|
||||
v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
|
||||
v-model="scope.row._select"
|
||||
:style="{'padding-left':+scope.row._level*indent + 'px'} "
|
||||
:indeterminate="scope.row._select"
|
||||
@change="handleCheckAllChange(scope.row)"
|
||||
/>
|
||||
<el-checkbox
|
||||
v-else
|
||||
v-model="scope.row._select"
|
||||
:style="{'padding-left':+scope.row._level*indent + 'px'} "
|
||||
@change="handleCheckAllChange(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
{{ scope.row[item.key] }}
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import treeToArray, { addAttrs } from './eval.js'
|
||||
|
||||
export default {
|
||||
name: 'TreeTable',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
defaultChildren: {
|
||||
type: String,
|
||||
default: 'children'
|
||||
},
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guard: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
children() {
|
||||
return this.defaultChildren
|
||||
},
|
||||
tableData() {
|
||||
const data = this.data
|
||||
if (this.data.length === 0) {
|
||||
return []
|
||||
}
|
||||
addAttrs(data, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
|
||||
const retval = treeToArray(data, this.defaultChildren)
|
||||
return retval
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addBrother(row, data) {
|
||||
if (row._parent) {
|
||||
row._parent.children.push(data)
|
||||
} else {
|
||||
this.data.push(data)
|
||||
}
|
||||
},
|
||||
addChild(row, data) {
|
||||
if (!row.children) {
|
||||
this.$set(row, 'children', [])
|
||||
}
|
||||
row.children.push(data)
|
||||
},
|
||||
delete(row) {
|
||||
const { _index, _parent } = row
|
||||
if (_parent) {
|
||||
_parent.children.splice(_index, 1)
|
||||
} else {
|
||||
this.data.splice(_index, 1)
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
return this.tableData
|
||||
},
|
||||
showRow: function({ row }) {
|
||||
const parent = row._parent
|
||||
const show = parent ? parent._expand && parent._show : true
|
||||
row._show = show
|
||||
return show
|
||||
? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;'
|
||||
: 'display:none;'
|
||||
},
|
||||
showSperadIcon(record) {
|
||||
return record[this.children] && record[this.children].length > 0
|
||||
},
|
||||
toggleExpanded(trIndex) {
|
||||
const record = this.tableData[trIndex]
|
||||
const expand = !record._expand
|
||||
record._expand = expand
|
||||
},
|
||||
handleCheckAllChange(row) {
|
||||
this.selcetRecursion(row, row._select, this.defaultChildren)
|
||||
this.isIndeterminate = row._select
|
||||
},
|
||||
selcetRecursion(row, select, children = 'children') {
|
||||
if (select) {
|
||||
this.$set(row, '_expand', true)
|
||||
this.$set(row, '_show', true)
|
||||
}
|
||||
const sub_item = row[children]
|
||||
if (sub_item && sub_item.length > 0) {
|
||||
sub_item.map(child => {
|
||||
child._select = select
|
||||
this.selcetRecursion(child, select, children)
|
||||
})
|
||||
}
|
||||
},
|
||||
updateTreeNode(item) {
|
||||
return new Promise(resolve => {
|
||||
const { _id, _parent } = item
|
||||
const index = _id.split('-').slice(-1)[0] // get last index
|
||||
if (_parent) {
|
||||
_parent.children.splice(index, 1, item)
|
||||
resolve(this.data)
|
||||
} else {
|
||||
this.data.splice(index, 1, item)
|
||||
resolve(this.data)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes treeTableShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes treeTableShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-ctrl {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #2196f3;
|
||||
}
|
||||
</style>
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -43,8 +43,6 @@ export default {
|
||||
dragTable: '拖拽Table',
|
||||
inlineEditTable: 'Table内编辑',
|
||||
complexTable: '综合Table',
|
||||
treeTable: '树形表格',
|
||||
customTreeTable: '自定义树表',
|
||||
tab: 'Tab',
|
||||
form: '表单',
|
||||
createArticle: '创建文章',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<el-button type="primary" size="small" style="margin:0 0 20px 0;">
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
||||
</el-button>
|
||||
|
||||
<tree-table
|
||||
ref="TreeTable"
|
||||
:data="tableData"
|
||||
:default-expand-all="true"
|
||||
:columns="columns"
|
||||
border
|
||||
default-children="children"
|
||||
@selection-change="selectChange"
|
||||
>
|
||||
<template slot="selection">
|
||||
<el-table-column type="selection" align="center" width="55" />
|
||||
</template>
|
||||
|
||||
<template slot="pre-column">
|
||||
<el-table-column type="expand" width="55">
|
||||
<template>
|
||||
<el-tag type="info">
|
||||
Here is just a placeholder slot, you can display anything.
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<template slot="timeline" slot-scope="{scope}">
|
||||
<el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
|
||||
<div class="processContainer">
|
||||
<div
|
||||
:style="{ width:(scope.row.timeLine||0) * 3+'px',
|
||||
background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
|
||||
marginLeft:scope.row._level * 50+'px' }"
|
||||
class="process"
|
||||
>
|
||||
<span style="display:inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<template slot="append" slot-scope="{scope}">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="addMenuItem(scope.row,'brother')"
|
||||
>
|
||||
Append Brother
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="addMenuItem(scope.row,'children')"
|
||||
>
|
||||
Append Child
|
||||
</el-button>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="{scope}">
|
||||
<el-button size="mini" type="success" @click="editItem(scope.row)">
|
||||
Edit
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteItem(scope.row)">
|
||||
Delete
|
||||
</el-button>
|
||||
</template>
|
||||
</tree-table>
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="Edit">
|
||||
<el-form :model="tempItem" label-width="100px" style="width:600px">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model.trim="tempItem.name" placeholder="Name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="updateItem">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeTable from '@/components/TreeTable'
|
||||
import data from './data.js'
|
||||
|
||||
export default {
|
||||
components: { TreeTable },
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
tempItem: {},
|
||||
dialogFormVisible: false,
|
||||
columns: [
|
||||
{
|
||||
label: 'Name',
|
||||
key: 'name',
|
||||
expand: true
|
||||
},
|
||||
{
|
||||
label: 'Timeline',
|
||||
key: 'timeline'
|
||||
},
|
||||
{
|
||||
label: 'Append',
|
||||
key: 'append',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
label: 'Operation',
|
||||
key: 'operation',
|
||||
width: 160
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.tableData = data
|
||||
},
|
||||
editItem(row) {
|
||||
this.tempItem = Object.assign({}, row)
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
async updateItem() {
|
||||
await this.$refs.TreeTable.updateTreeNode(this.tempItem)
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
addMenuItem(row, type) {
|
||||
if (type === 'children') {
|
||||
this.$refs.TreeTable.addChild(row, { name: 'child', timeLine: this.randomNum() })
|
||||
}
|
||||
|
||||
if (type === 'brother') {
|
||||
this.$refs.TreeTable.addBrother(row, { name: 'brother', timeLine: this.randomNum() })
|
||||
}
|
||||
},
|
||||
deleteItem(row) {
|
||||
this.$refs.TreeTable.delete(row)
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
},
|
||||
randomNum() {
|
||||
// return 1~100
|
||||
const max = 100
|
||||
const min = 1
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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
|
||||
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin-bottom:20px;">
|
||||
<el-button type="primary" size="small" class="option-item">
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
|
||||
</el-button>
|
||||
|
||||
<div class="option-item">
|
||||
<el-tag>Expand All</el-tag>
|
||||
<el-switch
|
||||
v-model="defaultExpandAll"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
@change="reset"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="option-item">
|
||||
<el-tag>Show Checkbox</el-tag>
|
||||
<el-switch
|
||||
v-model="showCheckbox"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tree-table :key="key" :default-expand-all="defaultExpandAll" :data="data" :columns="columns" border>
|
||||
<template slot="scope" slot-scope="{scope}">
|
||||
<el-tag>level: {{ scope.row._level }}</el-tag>
|
||||
<el-tag>expand: {{ scope.row._expand }}</el-tag>
|
||||
<el-tag>select: {{ scope.row._select }}</el-tag>
|
||||
</template>
|
||||
<template slot="operation" slot-scope="{scope}">
|
||||
<el-button type="primary" size="" @click="click(scope)">
|
||||
Click
|
||||
</el-button>
|
||||
</template>
|
||||
</tree-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import treeTable from '@/components/TreeTable'
|
||||
import data from './data'
|
||||
|
||||
export default {
|
||||
name: 'TreeTableDemo',
|
||||
components: { treeTable },
|
||||
data() {
|
||||
return {
|
||||
defaultExpandAll: false,
|
||||
showCheckbox: true,
|
||||
key: 1,
|
||||
columns: [
|
||||
{
|
||||
label: 'Checkbox',
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
key: 'id',
|
||||
expand: true
|
||||
},
|
||||
{
|
||||
label: 'Event',
|
||||
key: 'event',
|
||||
width: 200,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: 'Scope',
|
||||
key: 'scope'
|
||||
},
|
||||
{
|
||||
label: 'Operation',
|
||||
key: 'operation'
|
||||
}
|
||||
],
|
||||
data: data
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showCheckbox(val) {
|
||||
if (val) {
|
||||
this.columns.unshift({
|
||||
label: 'Checkbox',
|
||||
checkbox: true
|
||||
})
|
||||
} else {
|
||||
this.columns.shift()
|
||||
}
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
++this.key
|
||||
},
|
||||
click(scope) {
|
||||
console.log(scope)
|
||||
|
||||
const row = scope.row
|
||||
const message = Object.keys(row)
|
||||
.map(i => {
|
||||
return `<p>${i}: ${row[i]}</p>`
|
||||
})
|
||||
.join('')
|
||||
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: message,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.option-item{
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user