本文用于完善楼上同学demo中存在或者说没有描述详细的问题；
<template>
<div>
<el-table border v-if="tableData.length" :data="tableData" style="width: 100%">
<el-table-column prop="name" label="名称" >
<template slot-scope="scope">
<div @click="treeClick(scope.row,scope.$index)" style="cursor: pointer;">
<template v-if="scope.row.child && scope.row.child.length > 0">
<i class="el-icon-arrow-down" :style="'margin-left:'+(scope.row.code.split('-').length-1)*2+'em;'" v-if="scope.row.open"></i>
<i class="el-icon-arrow-right" :style="'margin-left:'+(scope.row.code.split('-').length-1)*2+'em;'" v-else></i>
<span >{{ scope.row.name }}{{scope.row.code.split('-').length}}</span>
</template>
<span v-else :style="'margin-left:'+(scope.row.code.split('-').length)*2+'em;'">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column prop="code" label="编码"></el-table-column>
<el-table-column prop="path" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
plain
@click="adeShow('edit', scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="deletedShow(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { rightsList, rightsDelByIds } from '@/api/integratedManagement';
const util = {};
util.treeTableXcode = (data, xcode) => {
xcode = xcode || '';
for (let i = 0; i < data.length; i++) {
const item = data[i];
item.xcode = xcode + i;
item.len = data.length;
if (item.child && item.child.length > 0) {
util.treeTableXcode(item.child, item.xcode + '-');
}
}
};
export default {
data() {
return {
tableData: [],
};
},
mounted() {
this.getList();
},
methods: {
getList() {
rightsList({}).then((res) => {
this.tableData = res.data;
util.treeTableXcode(res.data);
});
},
treeClick(item, index) {
if (item.open) {
this.collapse(item, index);
} else {
this.expand(item, index);
}
},
expand(item, index) {
if (!item.child) {
return index;
}
// 展开
for (let i = 0; item.child && i < item.child.length; i++) {
const child = item.child[i];
this.tableData.splice(++index, 0, child);
if (child.child && child.child.length > 0 && child.open) {
index = this.expand(child, index);
}
}
item.open = true;
return index;
},
collapse(item, index) {
if (!item.child) {
return index;
}
// 收缩
item.open = false;
const mylength = this.tableData[index + 1].len;
this.tableData.splice(index + 1, mylength);
},
adeShow(type, row) {
console.log(type);
console.log(row);
},
deletedShow(row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
rightsDelByIds(row.id).then((res) => {
this.$message({
type: 'success',
message: '删除成功!',
});
this.getList();
});
});
},
},
};
</script>
返回参数如下
{"code":200,"message":"","data":[{"name":"业务办理","id":1,"parentId":0,"child":[{"name":"廉租房业务","id":10,"parentId":1,"child":[{"name":"开放申请管理","id":100,"parentId":10,"child":[],"code":"01-01-00","seq":1,"path":"","remarks":""},{"name":"廉租房申请汇总","id":101,"parentId":10,"child":[],"code":"01-01-01","seq":1,"path":"","remarks":""},{"name":"资格审查管理","id":102,"parentId":10,"child":[],"code":"01-01-02","seq":1,"path":"","remarks":""},{"name":"联合初审管理","id":103,"parentId":10,"child":[],"code":"01-01-03","seq":1,"path":"","remarks":""},{"name":"房产局初审管理","id":104,"parentId":10,"child":[],"code":"01-01-04","seq":1,"path":"","remarks":""},{"name":"房产局复审管理","id":105,"parentId":10,"child":[],"code":"01-01-05","seq":1,"path":"","remarks":""},{"name":"资格公示管理","id":106,"parentId":10,"child":[],"code":"01-01-06","seq":1,"path":"","remarks":""},{"name":"摇号分房管理","id":107,"parentId":10,"child":[],"code":"01-01-07","seq":1,"path":"","remarks":""},{"name":"保障享受管理","id":108,"parentId":10,"child":[],"code":"01-01-08","seq":1,"path":"","remarks":""},{"name":"修改申请数据","id":109,"parentId":10,"child":[],"code":"01-01-09","seq":1,"path":"","remarks":""},{"name":"删除申请数据","id":110,"parentId":10,"child":[],"code":"01-01-10","seq":1,"path":"","remarks":""}],"code":"01-01","seq":1,"path":"","remarks":""},{"name":"公租房业务","id":14,"parentId":1,"child":[{"name":"开放申请管理","id":140,"parentId":14,"child":[],"code":"01-02-00","seq":1,"path":"","remarks":""},{"name":"公租房申请汇总","id":141,"parentId":14,"child":[],"code":"01-02-01","seq":1,"path":"","remarks":""},{"name":"资格审查管理","id":142,"parentId":14,"child":[],"code":"01-02-02","seq":1,"path":"","remarks":""},{"name":"联合初审管理","id":143,"parentId":14,"child":[],"code":"01-02-03","seq":1,"path":"","remarks":""},{"name":"房产局初审管理","id":144,"parentId":14,"child":[],"code":"01-02-04","seq":1,"path":"","remarks":""},{"name":"房产局复审管理","id":145,"parentId":14,"child":[],"code":"01-02-05","seq":1,"path":"","remarks":""},{"name":"资格公示管理","id":146,"parentId":14,"child":[],"code":"01-02-06","seq":1,"path":"","remarks":""},{"name":"摇号分房管理","id":147,"parentId":14,"child":[],"code":"01-02-07","seq":1,"path":"","remarks":""},{"name":"保障享受管理","id":148,"parentId":14,"child":[],"code":"01-02-08","seq":1,"path":"","remarks":""},{"name":"修改申请数据","id":149,"parentId":14,"child":[],"code":"01-02-09","seq":1,"path":"","remarks":""},{"name":"删除申请数据","id":150,"parentId":14,"child":[],"code":"01-02-10","seq":1,"path":"","remarks":""}],"code":"01-02","seq":1,"path":"","remarks":""},{"name":"租赁管理业务","id":18,"parentId":1,"child":[{"name":"补贴季度管理","id":181,"parentId":18,"child":[],"code":"01-03-01","seq":1,"path":"","remarks":""},{"name":"补贴申请汇总","id":182,"parentId":18,"child":[],"code":"01-03-02","seq":1,"path":"","remarks":""},{"name":"资格审查管理","id":183,"parentId":18,"child":[],"code":"01-03-03","seq":1,"path":"","remarks":""},{"name":"联合初审管理","id":184,"parentId":18,"child":[],"code":"01-03-04","seq":1,"path":"","remarks":""},{"name":"房产局初审管理","id":185,"parentId":18,"child":[],"code":"01-03-05","seq":1,"path":"","remarks":""},{"name":"房产局复审管理","id":186,"parentId":18,"child":[],"code":"01-03-06","seq":1,"path":"","remarks":""},{"name":"资格公示管理","id":187,"parentId":18,"child":[],"code":"01-03-07","seq":1,"path":"","remarks":""},{"name":"摇号分房管理","id":188,"parentId":18,"child":[],"code":"01-03-08","seq":1,"path":"","remarks":""},{"name":"保障享受管理","id":189,"parentId":18,"child":[],"code":"01-03-09","seq":1,"path":"","remarks":""},{"name":"修改申请数据","id":190,"parentId":18,"child":[],"code":"01-03-10","seq":1,"path":"","remarks":""},{"name":"删除申请数据","id":191,"parentId":18,"child":[],"code":"01-03-11","seq":1,"path":"","remarks":""},{"name":"补发租赁补贴","id":192,"parentId":18,"child":[],"code":"01-03-12","seq":1,"path":"","remarks":""}],"code":"01-03","seq":1,"path":"","remarks":""},{"name":"摇号结果管理","id":22,"parentId":1,"child":[{"name":"批次查看","id":221,"parentId":22,"child":[],"code":"01-04-01","seq":1,"path":"","remarks":""},{"name":"批次管理","id":222,"parentId":22,"child":[],"code":"01-04-02","seq":1,"path":"","remarks":""},{"name":"摇号结果查看","id":223,"parentId":22,"child":[],"code":"01-04-03","seq":1,"path":"","remarks":""},{"name":"摇号结果管理","id":224,"parentId":22,"child":[],"code":"01-04-04","seq":1,"path":"","remarks":""},{"name":"办理入住","id":225,"parentId":22,"child":[],"code":"01-04-05","seq":1,"path":"","remarks":""},{"name":"导入摇号结果","id":226,"parentId":22,"child":[],"code":"01-04-06","seq":1,"path":"","remarks":""},{"name":"导出摇号结果","id":227,"parentId":22,"child":[],"code":"01-04-07","seq":1,"path":"","remarks":""},{"name":"发送短信","id":228,"parentId":22,"child":[],"code":"01-04-08","seq":1,"path":"","remarks":""}],"code":"01-04","seq":1,"path":"","remarks":""},{"name":"联合审批","id":26,"parentId":1,"child":[{"name":"工商局审批","id":261,"parentId":26,"child":[],"code":"01-05-01","seq":1,"path":"","remarks":""},{"name":"婚姻登记处理审批","id":262,"parentId":26,"child":[],"code":"01-05-02","seq":1,"path":"","remarks":""},{"name":"民政局社会救助股审批","id":263,"parentId":26,"child":[],"code":"01-05-03","seq":1,"path":"","remarks":""},{"name":"车辆管理所审批","id":264,"parentId":26,"child":[],"code":"01-05-04","seq":1,"path":"","remarks":""},{"name":"公积金管理部审批","id":265,"parentId":26,"child":[],"code":"01-05-05","seq":1,"path":"","remarks":""},{"name":"社区审批","id":266,"parentId":26,"child":[],"code":"01-05-06","seq":1,"path":"","remarks":""},{"name":"不动产审批","id":267,"parentId":26,"child":[],"code":"01-05-07","seq":1,"path":"","remarks":""},{"name":"房产开发股审批","id":268,"parentId":26,"child":[],"code":"01-05-08","seq":1,"path":"","remarks":""},{"name":"人社局社保股审批","id":269,"parentId":26,"child":[],"code":"01-05-09","seq":1,"path":"","remarks":""},{"name":"人社局企业保险股审批","id":270,"parentId":26,"child":[],"code":"01-05-10","seq":1,"path":"","remarks":""},{"name":"人社局机关事业保险股审批","id":271,"parentId":26,"child":[],"code":"01-05-11","seq":1,"path":"","remarks":""}],"code":"01-05","seq":1,"path":"","remarks":""}],"code":"01","seq":1,"path":"","remarks":""},{"name":"综合管理","id":2,"parentId":0,"child":[{"name":"租赁管理","id":30,"parentId":2,"child":[{"name":"租赁合同查看","id":301,"parentId":30,"child":[],"code":"02-01-01","seq":1,"path":"","remarks":""},{"name":"租赁合同管理","id":302,"parentId":30,"child":[],"code":"02-01-02","seq":1,"path":"","remarks":""},{"name":"欠缴租金查看","id":303,"parentId":30,"child":[],"code":"02-01-03","seq":1,"path":"","remarks":""},{"name":"欠缴租金管理","id":304,"parentId":30,"child":[],"code":"02-01-04","seq":1,"path":"","remarks":""},{"name":"缴纳租金","id":305,"parentId":30,"child":[],"code":"02-01-05","seq":1,"path":"","remarks":""},{"name":"租金缴纳查看","id":306,"parentId":30,"child":[],"code":"02-01-06","seq":1,"path":"","remarks":""},{"name":"录入缴费发票","id":307,"parentId":30,"child":[],"code":"02-01-07","seq":1,"path":"","remarks":""},{"name":"租金减免查看","id":308,"parentId":30,"child":[],"code":"02-01-08","seq":1,"path":"","remarks":""},{"name":"补贴发放记录管理","id":309,"parentId":30,"child":[],"code":"02-01-09","seq":1,"path":"","remarks":""},{"name":"预缴租金查看","id":310,"parentId":30,"child":[],"code":"02-01-10","seq":1,"path":"","remarks":""},{"name":"预缴租金管理","id":311,"parentId":30,"child":[],"code":"02-01-11","seq":1,"path":"","remarks":""},{"name":"录入预缴租金票号","id":312,"parentId":30,"child":[],"code":"02-01-12","seq":1,"path":"","remarks":""},{"name":"预缴租金退款","id":313,"parentId":30,"child":[],"code":"02-01-13","seq":1,"path":"","remarks":""}],"code":"02-01","seq":1,"path":"","remarks":""},{"name":"年审管理","id":34,"parentId":2,"child":[{"name":"年审批次查看","id":341,"parentId":34,"child":[],"code":"02-02-01","seq":1,"path":"","remarks":""},{"name":"年审批次管理","id":342,"parentId":34,"child":[],"code":"02-02-02","seq":1,"path":"","remarks":""},{"name":"年审审批查看","id":343,"parentId":34,"child":[],"code":"02-02-03","seq":1,"path":"","remarks":""},{"name":"年审审批管理","id":344,"parentId":34,"child":[],"code":"02-02-04","seq":1,"path":"","remarks":""},{"name":"年审通过查看","id":345,"parentId":34,"child":[],"code":"02-02-05","seq":1,"path":"","remarks":""},{"name":"年审失败查看","id":346,"parentId":34,"child":[],"code":"02-02-06","seq":1,"path":"","remarks":""}],"code":"02-02","seq":1,"path":"","remarks":""},{"name":"房源管理","id":38,"parentId":2,"child":[{"name":"小区查看","id":381,"parentId":38,"child":[],"code":"02-03-01","seq":1,"path":"","remarks":""},{"name":"小区管理","id":382,"parentId":38,"child":[],"code":"02-03-02","seq":1,"path":"","remarks":""},{"name":"建筑物查看","id":383,"parentId":38,"child":[],"code":"02-03-03","seq":1,"path":"","remarks":""},{"name":"建筑物管理","id":384,"parentId":38,"child":[],"code":"02-03-04","seq":1,"path":"","remarks":""},{"name":"房源查看","id":385,"parentId":38,"child":[],"code":"02-03-05","seq":1,"path":"","remarks":""},{"name":"管理房源","id":386,"parentId":38,"child":[],"code":"02-03-06","seq":1,"path":"","remarks":""},{"name":"删除房源","id":387,"parentId":38,"child":[],"code":"02-03-07","seq":1,"path":"","remarks":""},{"name":"导入房源信息","id":388,"parentId":38,"child":[],"code":"02-03-08","seq":1,"path":"","remarks":""},{"name":"导出房源信息","id":389,"parentId":38,"child":[],"code":"02-03-09","seq":1,"path":"","remarks":""},{"name":"导出审计信息","id":390,"parentId":38,"child":[],"code":"02-03-10","seq":1,"path":"","remarks":""},{"name":"退出查看","id":391,"parentId":38,"child":[],"code":"02-03-11","seq":1,"path":"","remarks":""},{"name":"退出管理","id":392,"parentId":38,"child":[],"code":"02-03-12","seq":1,"path":"","remarks":""},{"name":"物业审核","id":393,"parentId":38,"child":[],"code":"02-03-13","seq":1,"path":"","remarks":""},{"name":"房产局审核","id":394,"parentId":38,"child":[],"code":"02-03-14","seq":1,"path":"","remarks":""},{"name":"维修查看","id":395,"parentId":38,"child":[],"code":"02-03-15","seq":1,"path":"","remarks":""},{"name":"管理维修单","id":396,"parentId":38,"child":[],"code":"02-03-16","seq":1,"path":"","remarks":""},{"name":"受理审批","id":397,"parentId":38,"child":[],"code":"02-03-17","seq":1,"path":"","remarks":""},{"name":"录入勘察数据","id":398,"parentId":38,"child":[],"code":"02-03-18","seq":1,"path":"","remarks":""},{"name":"维修审批","id":399,"parentId":38,"child":[],"code":"02-03-19","seq":1,"path":"","remarks":""},{"name":"验收审批","id":400,"parentId":38,"child":[],"code":"02-03-20","seq":1,"path":"","remarks":""}],"code":"02-03","seq":1,"path":"","remarks":""},{"name":"直管公房管理","id":40,"parentId":2,"child":[{"name":"公房申请查看","id":401,"parentId":40,"child":[],"code":"02-04-01","seq":1,"path":"","remarks":""},{"name":"直管公房申请管理","id":402,"parentId":40,"child":[],"code":"02-04-02","seq":1,"path":"","remarks":""},{"name":"租金收取查看","id":403,"parentId":40,"child":[],"code":"02-04-03","seq":1,"path":"","remarks":""},{"name":"租金收取管理","id":404,"parentId":40,"child":[],"code":"02-04-04","seq":1,"path":"","remarks":""},{"name":"签订合同","id":405,"parentId":40,"child":[],"code":"02-04-05","seq":1,"path":"","remarks":""}],"code":"02-04","seq":1,"path":"","remarks":""},{"name":"黑名单管理","id":42,"parentId":2,"child":[{"name":"黑名单查看","id":421,"parentId":42,"child":[],"code":"02-05-01","seq":1,"path":"","remarks":""},{"name":"黑名单管理","id":422,"parentId":42,"child":[],"code":"02-05-02","seq":1,"path":"","remarks":""},{"name":"黑名单原因查看","id":423,"parentId":42,"child":[],"code":"02-05-03","seq":1,"path":"","remarks":""},{"name":"黑名单原因管理","id":424,"parentId":42,"child":[],"code":"02-05-04","seq":1,"path":"","remarks":""}],"code":"02-05","seq":1,"path":"","remarks":""}],"code":"02","seq":1,"path":"","remarks":""},{"name":"系统管理","id":3,"parentId":0,"child":[{"name":"政务公开","id":46,"parentId":3,"child":[{"name":"信箱分类查看","id":461,"parentId":46,"child":[],"code":"03-01-01","seq":1,"path":"","remarks":""},{"name":"信箱分类管理","id":462,"parentId":46,"child":[],"code":"03-01-02","seq":1,"path":"","remarks":""},{"name":"群众信箱查看","id":463,"parentId":46,"child":[],"code":"03-01-03","seq":1,"path":"","remarks":""},{"name":"群众信箱管理","id":464,"parentId":46,"child":[],"code":"03-01-04","seq":1,"path":"","remarks":""},{"name":"政务分类查看","id":465,"parentId":46,"child":[],"code":"03-01-05","seq":1,"path":"","remarks":""},{"name":"政务分类管理","id":466,"parentId":46,"child":[],"code":"03-01-06","seq":1,"path":"","remarks":""},{"name":"政务内容查看","id":467,"parentId":46,"child":[],"code":"03-01-07","seq":1,"path":"","remarks":""},{"name":"政务内容管理","id":468,"parentId":46,"child":[],"code":"03-01-08","seq":1,"path":"","remarks":""},{"name":"相关链接查看","id":469,"parentId":46,"child":[],"code":"03-01-09","seq":1,"path":"","remarks":""},{"name":"相关链接管理","id":470,"parentId":46,"child":[],"code":"03-01-10","seq":1,"path":"","remarks":""},{"name":"焦点政务查看","id":471,"parentId":46,"child":[],"code":"03-01-11","seq":1,"path":"","remarks":""},{"name":"焦点政务管理","id":472,"parentId":46,"child":[],"code":"03-01-12","seq":1,"path":"","remarks":""}],"code":"03-01","seq":1,"path":"","remarks":""},{"name":"统计报表","id":50,"parentId":3,"child":[{"name":"保障申请统计","id":501,"parentId":50,"child":[],"code":"03-02-01","seq":1,"path":"","remarks":""},{"name":"房源统计","id":502,"parentId":50,"child":[],"code":"03-02-02","seq":1,"path":"","remarks":""},{"name":"租金统计","id":503,"parentId":50,"child":[],"code":"03-02-03","seq":1,"path":"","remarks":""},{"name":"租赁补贴统计","id":504,"parentId":50,"child":[],"code":"03-02-04","seq":1,"path":"","remarks":""},{"name":"黑名单统计","id":505,"parentId":50,"child":[],"code":"03-02-05","seq":1,"path":"","remarks":""},{"name":"维修统计","id":506,"parentId":50,"child":[],"code":"03-02-06","seq":1,"path":"","remarks":""}],"code":"03-02","seq":1,"path":"","remarks":""},{"name":"系统管理","id":54,"parentId":3,"child":[{"name":"系统用户查看","id":541,"parentId":54,"child":[],"code":"03-03-01","seq":1,"path":"","remarks":""},{"name":"系统用户管理","id":542,"parentId":54,"child":[],"code":"03-03-02","seq":1,"path":"","remarks":""},{"name":"系统角色查看","id":544,"parentId":54,"child":[],"code":"03-03-03","seq":1,"path":"","remarks":""},{"name":"系统角色管理","id":545,"parentId":54,"child":[],"code":"03-03-04","seq":1,"path":"","remarks":""},{"name":"审批意见查看","id":546,"parentId":54,"child":[],"code":"03-03-05","seq":1,"path":"","remarks":""},{"name":"审批意见管理","id":547,"parentId":54,"child":[],"code":"03-03-06","seq":1,"path":"","remarks":""},{"name":"单位信息查看","id":548,"parentId":54,"child":[],"code":"03-03-07","seq":1,"path":"","remarks":""},{"name":"单位信息维护","id":549,"parentId":54,"child":[],"code":"03-03-08","seq":1,"path":"","remarks":""},{"name":"社区信息查看","id":550,"parentId":54,"child":[],"code":"03-03-09","seq":1,"path":"","remarks":""},{"name":"社区信息维护","id":551,"parentId":54,"child":[],"code":"03-03-10","seq":1,"path":"","remarks":""},{"name":"回复模板查看","id":552,"parentId":54,"child":[],"code":"03-03-11","seq":1,"path":"","remarks":""},{"name":"回复模板管理","id":553,"parentId":54,"child":[],"code":"03-03-12","seq":1,"path":"","remarks":""},{"name":"短信接口查看","id":554,"parentId":54,"child":[],"code":"03-03-13","seq":1,"path":"","remarks":""},{"name":"短信接口管理","id":555,"parentId":54,"child":[],"code":"03-03-14","seq":1,"path":"","remarks":""},{"name":"短信模板查看","id":556,"parentId":54,"child":[],"code":"03-03-15","seq":1,"path":"","remarks":""},{"name":"短信模板管理","id":557,"parentId":54,"child":[],"code":"03-03-16","seq":1,"path":"","remarks":""},{"name":"小区租金查看","id":558,"parentId":54,"child":[],"code":"03-03-17","seq":1,"path":"","remarks":""},{"name":"小区租金管理","id":559,"parentId":54,"child":[],"code":"03-03-18","seq":1,"path":"","remarks":""}],"code":"03-03","seq":1,"path":"","remarks":""}],"code":"03","seq":1,"path":"","remarks":""}]}
