element-ui中table树形表格的实现
一般在后端管理项目中，都会涉及菜单管理。菜单都是树形结构的数据，我们在使用ElementUI的时候，发现并没提供相应的树形表格组件，所以需要自己来实现。下面就简单讲解下element-ui中table树形表格的实现代码
components/table-tree-column.vue代码如下：
<template>
<el-table-column :prop="prop" v-bind="$attrs">
<template slot-scope="scope">
<span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
<i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
{{ scope.row[prop] }}
</span>
</template>
</el-table-column>
</template>
<script>
export default {
name: 'table-tree-column',
props: {
prop: {
type: String
},
treeKey: {
type: String,
default: 'id'
},
parentKey: {
type: String,
default: 'parentId'
},
levelKey: {
type: String,
default: '_level'
},
childKey: {
type: String,
default: 'children'
}
},
methods: {
childStyles(row) {
return {
'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px'
}
},
iconClasses(row) {
return [!row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom']
},
iconStyles(row) {
return {
'visibility': this.hasChild(row) ? 'visible' : 'hidden'
}
},
hasChild(row) {
return(Array.isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
},
// 切换处理
toggleHandle(index, row) {
if(this.hasChild(row)) {
var data = this.$parent.store.states.data.slice(0)
data[index]._expanded = !data[index]._expanded
if(data[index]._expanded) {
data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
} else {
data = this.removeChildNode(data, row[this.treeKey])
}
this.$parent.store.commit('setData', data)
this.$nextTick(() => {
this.$parent.doLayout()
})
}
},
// 移除子节点
removeChildNode(data, parentId) {
var parentIds = Array.isArray(parentId) ? parentId : [parentId]
if(parentId.length <= 0) {
return data
}
var ids = []
for(var i = 0; i < data.length; i++) {
if(parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
ids.push(data.splice(i, 1)[0][this.treeKey])
i--
}
}
return this.removeChildNode(data, ids)
}
}
}
</script>pages/menu.vue代码如下：
<template>
<div class="menu">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" ></el-table-column>
<TableTreeColumn prop="name" treeKey="id" label="菜单名称">
</TableTreeColumn>
<el-table-column prop="url" label="URL"></el-table-column>
<el-table-column label="操作" width="280">
<template slot-scope="scope">
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import TableTreeColumn from '@/components/table-tree-column.vue'
export default {
components: {
TableTreeColumn,
},
data () {
return {
tableData:null,//列表显示数据
}
},
created: function(){
this.getData();
},
methods: {
getData() {//获取菜单数据
const menus=[//简单模拟一下数据 typ[0上级菜单，1页面菜单]
{id: 1, parentId: 0, name: "系统管理", url: "sys",type:0},
{id: 2, parentId: 1, name: "账号管理", url: "sys/account",type:1},
{id: 3, parentId: 1, name: "菜单管理", url: "sys/menu",type:1},
{id: 4, parentId: 1, name: "角色管理", url: "sys/role",type:1},
]
this.tableData=this.toTree(menu)
},
toTree(data){//转换为数据结构-自己封装吧。
data.forEach((item)=>{//删除所有children,以防止多次调用
delete item.children;
});
var map = {};// 将数据存储为以id为 KEY的 map索引数据列
data.forEach((item)=> {
map[item.id] = item;
});
var val = [];
data.forEach((item)=> {
var parent = map[item.parentId]; //以当前遍历项，的parentId,去map对象中找到索引的id
if(parent){//如果找到索引，说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
(parent.children || ( parent.children = [] )).push(item);
}else{
val.push(item);//如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
}
});
return val;
}
}
}
</script>直接可以拿去使用，根据自己的项目进行相应的修改即可。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
