最近在vue项目中用到了表格树,like this
element-ui之前是不支持表格树的,谁曾想,随着它的升级,竟然也支持表格树了
我忙前忙后忙活半天,各类百度,最后弄出来了,发现element-ui支持表格树了,,这找谁说理去?因而我找了个墙角冷静了一会,最终决定仍是把代码发上来,供你们参考吧!
既然是表格树,那么就是一个组件,我直接上代码了,我决定直接开始装逼!javascript
<template> <el-table :data="data" border style="width: 100%" :height="height" :row-style="showTr" size="mini"> <el-table-column v-for="(column,index) in columns" :key="column.dataIndex" :label="column.text" show-overflow-tooltip> <template slot-scope="scope"> <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span> <i v-if="!scope.row._expanded && toggleIconShow(index,scope.row)" class="el-icon-caret-right" aria-hidden="true" @click="toggle(scope.$index)"></i> <i v-if="scope.row._expanded && toggleIconShow(index,scope.row)" class="el-icon-caret-bottom" aria-hidden="true" @click="toggle(scope.$index)"></i> <span> {{scope.row[column.dataIndex]}} </span> </template> </el-table-column> </el-table> </template> <script src="./index.js"></script> <style lang="scss" scoped src="./index.scss"></style>
.ms-tree-space { position:relative; top:1px; display:inline-block; font-family:"Glyphicons Halflings"; font-style:normal; font-weight:400; line-height:1; width:18px; height:14px; } .ms-tree-space::before { content:""; } table td { line-height:26px; }
import tool from '../../server/tool'; // import Vue from 'vue' export default { name: 'TreeGrid', props: { // 该属性是确认父组件传过来的数据是否已是树形结构了,若是是,则不须要进行树形格式化 treeStructure: { type: Boolean, default: function () { return false } }, height: { type: Number, default: function () { return 500 } }, more: { type: Boolean, default: function () { return false } }, // 这是相应的字段展现 columns: { type: Array, default: function () { return [] } }, // 这是数据源 dataSource: { type: Array, default: function () { return [] } }, // 这个做用是根据本身需求来的,好比在操做中涉及相关按钮编辑,删除等,须要向服务端发送请求,则能够把url传过来 requestUrl: { type: String, default: function () { return '' } }, // 这个是是否展现操做列 treeType: { type: String, default: function () { return 'normal' } }, // 是否默认展开全部树 defaultExpandAll: { type: Boolean, default: function () { return false } } }, data() { return {} }, computed: { // 格式化数据源 data: function () { let me = this if (me.treeStructure) { let data = tool.treeToArray(me.dataSource, null, null, me.defaultExpandAll) return data } return me.dataSource } }, methods: { // 显示行 showTr(row, index) { let show = (row.row._parent ? (row.row._parent._expanded && row.row._parent._show) : true) row.row._show = show return show ? '' : 'display:none;' }, // 展开下级 toggle(trIndex) { let me = this let record = me.data[trIndex] record._expanded = !record._expanded }, // 显示层级关系的空格和图标 spaceIconShow(index) { let me = this if (me.treeStructure && index === 0) { return true } return false }, // 点击展开和关闭的时候,图标的切换 toggleIconShow(index, record) { let me = this if (me.treeStructure && index === 0 && record.children && record.children.length > 0) { return true } return false }, } }
上面引用了一个tool.js,那么我把它也放出来css
import Vue from 'vue'; export default{ treeToArray(data, parent, level, expandedAll){ let tmp = [] Array.from(data).forEach((record) => { if(record._expanded === undefined) { Vue.set(record, '_expanded', expandedAll) } if(parent) { Vue.set(record, '_parent', parent) } let _level = 0 if(level !== undefined && level !== null) { _level = level + 1 } Vue.set(record, '_level', _level) tmp.push(record) if(record.children && record.children.length > 0) { let children = this.treeToArray(record.children, record, _level, expandedAll) tmp = tmp.concat(children) } }) return tmp; } }
这样就大功告成了,使用的话就是这个样子滴html
<TreeGrid :columns="columns" :tree-structure="true" :data-source="dataSource" :height = "tableHeight"></TreeGrid>
columns: [ { text: '数据集名称', dataIndex: 'name' }, { text: '增量记录数', dataIndex: 'age' }, { text: '收藏次数', dataIndex: 'sex' } ], dataSource: [ { id: 1, parentId: 0, name: '测试1', age: 18, sex: '男', children: [ { id: 2, parentId: 1, name: '测试2', age: 22, sex: '男' } ] }, { id: 3, parentId: 0, name: '测试3', age: 23, sex: '女', children: [ { id: 4, parentId: 3, name: '测试4', age: 22, sex: '男' }, { id: 5, parentId: 3, name: '测试5', age: 25, sex: '男' }, { id: 6, parentId: 3, name: '测试6', age: 26, sex: '女', children: [ { id: 7, parentId: 6, name: '测试7', age: 27, sex: '男' } ] } ] }, { id: 18, parentId: 0, name: '测试8', age: 18, sex: '男' } ],
一句话,完美!
三哥的微信公众号,打开你的微信,扫描它,而后带走我!嘻嘻!
三哥QQ交流群
vue