mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-09-07 02:19:49 +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
|
- Table
|
||||||
- Dynamic Table
|
- Dynamic Table
|
||||||
- Drag And Drop Table
|
- Drag And Drop Table
|
||||||
- Tree Table
|
|
||||||
- Inline Edit Table
|
- Inline Edit Table
|
||||||
|
|
||||||
- Error Page
|
- 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',
|
dragTable: 'Drag Table',
|
||||||
inlineEditTable: 'Inline Edit',
|
inlineEditTable: 'Inline Edit',
|
||||||
complexTable: 'Complex Table',
|
complexTable: 'Complex Table',
|
||||||
treeTable: 'Tree Table',
|
|
||||||
customTreeTable: 'Custom TreeTable',
|
|
||||||
tab: 'Tab',
|
tab: 'Tab',
|
||||||
form: 'Form',
|
form: 'Form',
|
||||||
createArticle: 'Create Article',
|
createArticle: 'Create Article',
|
||||||
|
|||||||
@ -43,8 +43,6 @@ export default {
|
|||||||
dragTable: 'Arrastrar tabla',
|
dragTable: 'Arrastrar tabla',
|
||||||
inlineEditTable: 'Editor',
|
inlineEditTable: 'Editor',
|
||||||
complexTable: 'Complex Table',
|
complexTable: 'Complex Table',
|
||||||
treeTable: 'Tree Table',
|
|
||||||
customTreeTable: 'Custom TreeTable',
|
|
||||||
tab: 'Pestaña',
|
tab: 'Pestaña',
|
||||||
form: 'Formulario',
|
form: 'Formulario',
|
||||||
createArticle: 'Crear artículo',
|
createArticle: 'Crear artículo',
|
||||||
|
|||||||
@ -43,8 +43,6 @@ export default {
|
|||||||
dragTable: '拖拽Table',
|
dragTable: '拖拽Table',
|
||||||
inlineEditTable: 'Table内编辑',
|
inlineEditTable: 'Table内编辑',
|
||||||
complexTable: '综合Table',
|
complexTable: '综合Table',
|
||||||
treeTable: '树形表格',
|
|
||||||
customTreeTable: '自定义树表',
|
|
||||||
tab: 'Tab',
|
tab: 'Tab',
|
||||||
form: '表单',
|
form: '表单',
|
||||||
createArticle: '创建文章',
|
createArticle: '创建文章',
|
||||||
|
|||||||
@ -10,7 +10,6 @@ import Layout from '@/layout/Layout'
|
|||||||
import componentsRouter from './modules/components'
|
import componentsRouter from './modules/components'
|
||||||
import chartsRouter from './modules/charts'
|
import chartsRouter from './modules/charts'
|
||||||
import tableRouter from './modules/table'
|
import tableRouter from './modules/table'
|
||||||
import treeTableRouter from './modules/tree-table'
|
|
||||||
import nestedRouter from './modules/nested'
|
import nestedRouter from './modules/nested'
|
||||||
|
|
||||||
/** note: sub-menu only appear when children.length>=1
|
/** note: sub-menu only appear when children.length>=1
|
||||||
@ -175,7 +174,6 @@ export const asyncRoutes = [
|
|||||||
chartsRouter,
|
chartsRouter,
|
||||||
nestedRouter,
|
nestedRouter,
|
||||||
tableRouter,
|
tableRouter,
|
||||||
treeTableRouter,
|
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/example',
|
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