美文网首页
13、递归动态读表头的例子

13、递归动态读表头的例子

作者: wqjcarnation | 来源:发表于2020-05-19 15:46 被阅读0次

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;

相关文章

网友评论

      本文标题:13、递归动态读表头的例子

      本文链接:https://www.haomeiwen.com/subject/hfubohtx.html