springboot+vue+elementUI实现表格树形数据增删查改

1.建表

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Struct {
    private Integer struct_id;
    private String struct_name;
    private Integer struct_level;
    private Integer struct_parentid;
    private List<Struct> children;

}

2.在service里面实现获得层级树

public List<Struct> getLevelTree(){
        //根据层级关系查询了3次
        List<Struct> level1=structMapper.selectStructLevel(1);
        List<Struct> level2=structMapper.selectStructLevel(2);
        List<Struct> level3=structMapper.selectStructLevel(3);
        //先将最末级转为TreeNode 的形式
        List<Struct> node3 = level3.stream().map(l3 -> {
            Struct treeNode = new Struct();
            treeNode.setStruct_id(l3.getStruct_id());
            treeNode.setStruct_name(l3.getStruct_name());
            treeNode.setStruct_level(l3.getStruct_level());
            treeNode.setStruct_parentid(l3.getStruct_parentid());
            //没有下级children 不做处理
            return treeNode;
        }).collect(toList());
        //对二级目录进行抽象
        List<Struct> node2 = level2.stream().map(l2 -> {
            Struct treeNode = new Struct();
            treeNode.setStruct_id(l2.getStruct_id());
            treeNode.setStruct_name(l2.getStruct_name());
            treeNode.setStruct_level(l2.getStruct_level());
            treeNode.setStruct_parentid(l2.getStruct_parentid());
           try{
               treeNode.setChildren(node3.stream().
                       filter(l3 -> l3.getStruct_parentid().equals(l2.getStruct_id())).
                       collect(toList()));
           }catch (Exception e){

           }

            return treeNode;
        }).collect(toList());
        //对一级目录继续抽象并返回
        List<Struct> node1 = level1.stream().map(l1 -> {
            Struct treeNode = new Struct();
            treeNode.setStruct_id(l1.getStruct_id());
            treeNode.setStruct_name(l1.getStruct_name());
            treeNode.setStruct_level(l1.getStruct_level());
            treeNode.setStruct_parentid(l1.getStruct_parentid());
            try {
                treeNode.setChildren(node2.stream().
                        filter(l2 -> l2.getStruct_parentid().equals(l1.getStruct_id())).
                        collect(toList()));
            }catch (Exception e) {

            }

            return treeNode;
        }).collect(toList());
        return node1;
    }

3.Mapper里的增删查改

@Mapper
public interface StructMapper {
    @Select("select * from t_struct ")
    List<Struct> selectStruct();

    @Insert("INSERT into t_struct(struct_name,struct_level,struct_parentid) VALUES (#{struct_name}, #{struct_level},#{struct_parentid})")
    int insertStruct(Struct struct);
    @Update("update t_struct set struct_name=#{struct_name},struct_level=#{struct_level},struct_parentid=#{struct_parentid} where struct_id=#{struct_id}")
    int updateStruct(Struct struct);

    @Delete("delete from t_struct where struct_id = #{struct_id}")
    Integer deleteStructById( Integer struct_id);
    @Select("select * from t_struct where struct_level = #{struct_level}")
    List<Struct> selectStructLevel(Integer struct_level);
}

4.controller

@RestController
@RequestMapping("/tree")
public class StructController {
    @Resource
    private StructService structService;
    @Resource
    private StructMapper structMapper;
    // 新增和修改
    @PostMapping("/struct_id")
    public Integer save(@RequestBody Struct struct) {

        return structService.save(struct);
    }

    // 查询所有数据
    @PostMapping("/cc")
    public String findAll() throws JsonProcessingException {
        List<Struct> all = structMapper.selectStruct();
        ObjectMapper objectMapper = new ObjectMapper();
        //BuildTree.buildTree(all)
        return objectMapper.writeValueAsString(structService.getLevelTree() );
    }
    //删除
    @DeleteMapping("/{struct_id}")
    public Integer deleteId(@PathVariable("struct_id")  Integer struct_id) {
        return structService.removeByIds(struct_id);
    }
}

5.前端页面

<template>
<div>
  <el-table
          :data="menuData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="struct_id"
          border
          default-expand-all
          :tree-props="{children: 'children'}">
    <el-table-column
            prop="struct_id"
            label="ID"
            sortable
            >
    </el-table-column>
    <el-table-column
            prop="struct_name"
            label="姓名"
            sortable
           >
    </el-table-column>
    <el-table-column
            prop="struct_level"
            label="level"
            sortable
    >
    </el-table-column><el-table-column
          prop="struct_parentid"
          label="父ID"
          sortable
  >
  </el-table-column>
    <el-table-column
            label="操作"
            align="center"
    >
      <template slot-scope="scope">
        <el-button type="primary" @click="handleAdd()" v-if="scope.row.struct_level===2||scope.row.struct_level===1" >新增 <i class="el-icon-plus"></i></el-button>
        <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
        <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="del(scope.row.struct_id)"
        >
          <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="30%" >
    <el-form label-width="80px" size="small">
      <el-form-item label="名称">
        <el-input v-model="form.struct_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="Level">
        <el-input v-model="form.struct_level" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="父ID">
        <el-input v-model="form.struct_parentid" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</div>



</template>
<script>
  import request from "@/axios/request";
let id = 1000;
export default {
  data() {
    return{
      tableData: [],
      name: "",
      form: {},
      dialogFormVisible: false,
      multipleSelection: [],
      options: [],

      menuData:JSON.parse(JSON.stringify([{
        id: 1,
        struct_id:"",
        struct_name:"",
        struct_level:"",
        struct_parentid:"",
        children:[{
          id: 2,
          struct_id:"",
          struct_name:"",
          struct_level:"",
          struct_parentid:"",
        }]
      }],)),

  }


  },
  methods:{
    load() {
      request.post("/tree/cc", {
        params: {
          struct_name: this.struct_name,
          struct_id:this.struct_id,
          struct_level:this.struct_level,
          struct_parentid:this.struct_parentid,
        }
      }).then(res => {
        this.menuData = res
        console.log(this.menuData)
      })
  },
    save() {
      if(this.form.struct_level!=1 && this.form.struct_level!=2 && this.form.struct_level!=3){
        this.$message.error("请输入level为1，2，3的值！")
        }else{
        request.post("/tree/struct_id", this.form).then(res => {
          if (res) {
            this.$message.success("保存成功")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("保存失败")
          }
        })

      }
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}

    },
    handleEdit(row) {
      // this.form = JSON.parse(JSON.stringify(row))
      this.form = row
      this.dialogFormVisible = true
    },
    del(struct_id) {
      request.delete("/tree/" + struct_id).then(res => {
        if (res) {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
  },
  mounted() {
    this.load()
  },
  created() {

  },
 
}
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>

查了很多的资料才写出来的，这个level层级只有三级，如果需要更多的层级，自己看后端代码修改。