1、前台
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="grand in titles" :label="grand.menuName" :key="grand.id" align="center" :prop="grand.prop"
width="100">
<el-table-column v-if="grand.hasChild" v-for="child in grand.children" :label="child.menuName" :key="child.id"
align="center" :prop="child.prop" width="100">
<el-table-column v-if="child.hasChild" v-for="item in child.children" :label="item.menuName" :key="item.id"
align="center" :prop="item.prop" width="100">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
"套系区间": 11,
"拍摄方式": 22,
"每单成交成本": 33,
"产品成本": 44,
"网销人员工资": 55,
"网销": 66,
"礼服购置": 77,
"礼服": 88
}],
titles: []
}
},
mounted() {
this.$axios.get("http://localhost:8080/digui/findAll")
.then(response=>{
this.titles=response.data;
})
}
}
</script>
<style>
.el-table--border,
.el-table--group {
border: 1px solid black;
}
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: 1px solid black;
}
.el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid black;
}
.el-table--border th,
.el-table__fixed-right-patch {
border-bottom: 1px solid black;
}
</style>
2、后台controller
@RequestMapping("digui")
@RestController
public class DiGuiController {
@Autowired
IDiGuiService service;
@RequestMapping("findAll")
public List<DiGuiDemo> findAll() {
return service.findAll();
}
}
3、DiGuiServiceImpl
@Service
public class DiGuiServiceImpl implements IDiGuiService {
@Autowired
IDiGuiRepository repository;
@Override
public List<DiGuiDemo> findAll() {
// 先获取根下的menu
List<DiGuiDemo> list = repository.findBySuperId(0);
List<DiGuiDemo> newlist=findChildRen(list);
return newlist;
}
public List<DiGuiDemo> findChildRen(List<DiGuiDemo> list) {
// 循环里面的每一个对象
for (DiGuiDemo obj : list) {
if (!obj.isHasChild()) {
System.out.println(obj.getMenuName()+"即将返回");
continue;
} else {
System.out.println(obj.getMenuName()+"继续");
// 查询子对象
List<DiGuiDemo> childlist = repository.findBySuperId(obj.getId());
if (list != null) {
obj.setChildren(childlist);
}
findChildRen(childlist);
}
}
return list;
}
}
4、dao
public interface IDiGuiRepository extends JpaRepository<DiGuiDemo, Integer> {
List<DiGuiDemo> findBySuperId(int i);
}
5、实体
package com.neuedu.his.pojo;
import java.util.List;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.persistence.Transient;
@Entity
@Table(name="titles")
public class DiGuiDemo {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name="id",length=9)
private Integer id;
//显示名称
private String menuName;
//父类id
private int superId;
//是否有下级
private boolean hasChild;
//绑定的属性名
private String prop;
@Transient
private List<DiGuiDemo> children;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getMenuName() {
return menuName;
}
public void setMenuName(String menuName) {
this.menuName = menuName;
}
public int getSuperId() {
return superId;
}
public void setSuperId(int superId) {
this.superId = superId;
}
public String getProp() {
return prop;
}
public void setProp(String prop) {
this.prop = prop;
}
public boolean isHasChild() {
return hasChild;
}
public void setHasChild(boolean hasChild) {
this.hasChild = hasChild;
}
public List<DiGuiDemo> getChildren() {
return children;
}
public void setChildren(List<DiGuiDemo> children) {
this.children = children;
}
}
6、模拟数据
Source Database : his
Target Server Type : MYSQL
Target Server Version : 50553
File Encoding : 65001
Date: 2020-05-19 15:45:34
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for titles
-- ----------------------------
DROP TABLE IF EXISTS `titles`;
CREATE TABLE `titles` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`hasChild` bit(1) DEFAULT NULL,
`menuName` varchar(255) DEFAULT NULL,
`prop` varchar(255) DEFAULT NULL,
`superId` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of titles
-- ----------------------------
INSERT INTO `titles` VALUES ('1', '\0', '套系区间', '套系区间', '0');
INSERT INTO `titles` VALUES ('2', '\0', '拍摄方式', '拍摄方式', '0');
INSERT INTO `titles` VALUES ('3', '�', '直接成本/单', null, '0');
INSERT INTO `titles` VALUES ('4', '\0', '每单成交成本', '每单成交成本', '3');
INSERT INTO `titles` VALUES ('5', '\0', '产品成本', '产品成本', '3');
INSERT INTO `titles` VALUES ('6', '�', '间接成本/单', null, '0');
INSERT INTO `titles` VALUES ('7', '�', '人力成本', '', '6');
INSERT INTO `titles` VALUES ('8', '\0', '网销人员工资', '网销人员工资', '7');
INSERT INTO `titles` VALUES ('9', '\0', '网销', '网销', '7');
SET FOREIGN_KEY_CHECKS=1;
网友评论