springboot+vue3+ElementPlus实现树表格管理

实现效果

实现思路

在后端将数据处理成树形数据之后，参考ElementPlus 中的表格控件中的树形数据与懒加载控件

实现代码

SysDeptController.java

@RestController
@RequestMapping("/sysdept")
public class SysDeptController {
    @Resource
    private SysDeptService sysDeptService;

    @GetMapping
    public Result<?> selectreturntree(){
        List<SysDept> deptLists = sysDeptService.list();
        Map<Integer,List<SysDept>> groupMap = deptLists.stream().collect(Collectors.groupingBy(SysDept::getParentId));
        deptLists.forEach(deptList->{

            deptList.setChildren(groupMap.get(deptList.getDeptId()));
        });
        List<SysDept> collect = deptLists.stream().filter(deptList->deptList.getParentId().equals(0)).collect(Collectors.toList());
        return Result.success(collect);
    }
}

template

<el-table
        ref="treeRef"
        :data="tree"
        row-key="deptId"
        default-expand-all
        :tree-props="{children:'children'}"
        :filter-node-method="filterNode"
    >
      <el-table-column
          prop="deptId"
          label="部门ID">
      </el-table-column>
      <el-table-column
          prop="deptName"
          label="部门名称">
      </el-table-column>
      <el-table-column
          prop="orderNum"
          label="排序">
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{row}">
          <p v-if="row.status==='0'" class="deptview-normal">正常</p>
          <p v-else class="deptview-stop">停用</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" label="操作" class="deptview-oper">
        <template #default="scope">
          <el-button size="small" @click="update(scope.row)" type="primary">修改</el-button>
          <el-button size="small" @click="insert()" type="primary">新增</el-button>
          <el-popconfirm title="确认删除吗？" @confirm="deletedept(scope.row.deptId)">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

script setup 

let treeRef = ref([])
let tree = ref([])
//获取部门信息
request.get("/sysdept").then(res => {
  if (res.code === "0") {
    tree.value = res.data
    console.log("tree" + res.data)
  }
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.deptName.indexOf(value) !== -1
}