Vue之ElementUI结合后端实现数据表格、分页、动态树菜单效果

2023-09-05 05:42:46

Vue、ElementUI 和 MySQL 构建动态树形菜单、数据表格和分页

技术选型

本项目采用以下技术栈：

Vue.js： 渐进式 JavaScript 框架，用于构建用户界面。
ElementUI： 基于 Vue.js 的 UI 组件库，提供高质量、易用的组件。
MySQL： 流行的关系型数据库管理系统，用于存储和管理数据。

数据库设计

首先，我们在 MySQL 中创建名为 tree_demo 的数据库，并设计名为 tree_data 的表来存储树形菜单数据：

CREATE TABLE tree_data (
  id INT NOT NULL AUTO_INCREMENT,
  parent_id INT NOT NULL,
  name VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

后端开发

使用 Java Spring Boot 编写后端代码处理数据请求：

@RestController
public class TreeDataController {

    @Autowired
    private TreeDataService treeDataService;

    @GetMapping("/tree-data")
    public List<TreeData> getTreeData() {
        return treeDataService.getTreeData();
    }
}

前端开发

使用 Vue.js 和 ElementUI 开发前端页面显示数据：

<template>
  <div>
    <el-tree :data="treeData" show-checkbox></el-tree>
    <el-table :data="tableData" stripe>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
    </el-table>
    <el-pagination :page-size="10" :total="total" @current-change="handlePageChange"></el-pagination>
  </div>
</template>

<script>
import { Tree, Table, Pagination } from 'element-ui';
import { getTreeData } from '@/api/tree-data';

export default {
  components: {
    Tree,
    Table,
    Pagination
  },
  data() {
    return {
      treeData: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    getTreeData() {
      getTreeData().then(res => {
        this.treeData = res.data;
        this.tableData = res.data;
        this.total = res.data.length;
      });
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.getTreeData();
    }
  }
};
</script>