Commit 0d47e345 authored by Pan's avatar Pan

perf[treeTable]

parent 3253a91a
...@@ -78,6 +78,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l ...@@ -78,6 +78,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
- Export excel - Export excel
- Export zip - Export zip
- Front-end visualization excel - Front-end visualization excel
- Tree Table
- Table example - Table example
- Dynamictable example - Dynamictable example
- Drag and drop table example - Drag and drop table example
......
...@@ -91,6 +91,7 @@ ...@@ -91,6 +91,7 @@
- 导出excel - 导出excel
- 导出zip - 导出zip
- 前端可视化excel - 前端可视化excel
- 树形table
- Table example - Table example
- 动态table example - 动态table example
- 拖拽table example - 拖拽table example
......
<template> <template>
<el-table :data="formatData" :row-style="showRow"> <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
<el-table-column v-if="columns.length===0" width="150"> <el-table-column v-if="columns.length===0" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span> <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
......
## 写在前面 ## 写在前面
此组件仅提供一个创建TreeTable的解决方案 此组件仅提供一个创建TreeTable的解决方案
##prop说明 ## prop说明
###data ### data
**必填** **必填**
原始数据,要求是一个数组或者对象 原始数据,要求是一个数组或者对象
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
} }
``` ```
###columns ### columns
列属性,要求是一个数组 列属性,要求是一个数组
1. text: 显示在表头 1. text: 显示在表头
......
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
dragTable: '拖拽table', dragTable: '拖拽table',
inlineEditTable: 'table内编辑', inlineEditTable: 'table内编辑',
complexTable: '综合table', complexTable: '综合table',
treeTable: '树', treeTable: '树形表格',
customTreeTable: '自定义树表', customTreeTable: '自定义树表',
tab: 'Tab', tab: 'Tab',
form: '表单', form: '表单',
......
<template> <template>
<tree-table :data="data" :evalFunc="func" :evalArgs="args"> <div class="app-container">
<el-tag style="margin-bottom:20px;">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-tag>
<tree-table :data="data" :evalFunc="func" :evalArgs="args" border>
<el-table-column label="事件"> <el-table-column label="事件">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="color:sandybrown">{{scope.row.event}}</span> <span style="color:sandybrown">{{scope.row.event}}</span>
...@@ -25,6 +31,7 @@ ...@@ -25,6 +31,7 @@
</template> </template>
</el-table-column> </el-table-column>
</tree-table> </tree-table>
</div>
</template> </template>
<script> <script>
......
<template> <template>
<tree-table :data="data" :columns="columns"></tree-table> <div class="app-container">
<el-tag style="margin-bottom:20px;">
<a href="https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable" target="_blank">Documentation</a>
</el-tag>
<tree-table :data="data" :columns="columns" border></tree-table>
</div>
</template> </template>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment