mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-11 22:08:05 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
109 lines
3.1 KiB
Markdown
109 lines
3.1 KiB
Markdown
# Tree-Table
|
||
|
||
## 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
|