级联选择框

实现级联选择框

效果图

实现

前端

工具版本

• node.js v16.6.0
• vue3

级联选择框使用 Element-Plus 实现

添加依赖

在 package.json 添加依赖，并 npm i 导入

"element-plus": "^1.1.0-beta.15",

main.js导入依赖

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'; // 使用 createApp 替换 Vue 的导入方式
import App from './App.vue';

... 

const app = createApp(App); // 使用 createApp 创建 Vue 应用
app.use(ElementPlus)
app.mount('#app'); // 挂载 Vue 应用到 DOM 节点

级联选择框样式

options 即为级联选择框展示的数据，后端返回对应数据即可，如下

{
  label: '...',
  value: '...',
  childred: [
    {}
  ]
}

后端

数据库设计

假设数据库表名为 career

则字段为：

id、name、parent_id

我们设计最顶层的条件的 parent_id 为 null，后端使用递归查出即可

这里只列出 Service 层相关方法：

这里使用了 JSONArray，引入 fastjson 依赖即可。

<dependency>
      <groupId>com.alibabagroupId>
      <artifactId>fastjsonartifactId>
      <version>1.2.75version>
dependency>

@Override
public JSONArray getData() {
    QueryWrapper<Career> qw = new QueryWrapper<>();
    // 查出 career 表中所有数据
    List<Career> careers = careerMapper.selectList(qw);
    // 进行递归解析
    JSONArray result = resolve(careers, null);
    return result;
}

public JSONArray resolve(List<Career> careers, Integer parentId) {
    JSONArray curResult = new JSONArray();
    for (Career career : careers) {
        JSONObject obj = new JSONObject();
        obj.put("value", career.getId());
        obj.put("label", career.getName());
		// 根节点
        if (career.getParentId() == null && parentId == null) {
            JSONArray children = resolve(careers, career.getId());
            if (children != null && children.size() > 0) {
                obj.put("children", children);
            }
            curResult.add(obj);
        } else if (career.getParentId() != null && parentId != null && career.getParentId().equals(parentId)){
            JSONArray children = resolve(careers, career.getId());
            if (children != null && children.size() > 0) {
                obj.put("children", children);
            }
            curResult.add(obj);
        }
    }
    return curResult;
}

数据库模拟数据如下：

id: 1, name: "软件开发", "parent_id": null
id: 2, name: "后端开发", "parent_id": 1
id: 3, name: "前端开发", "parent_id": 2
id: 4, name: "Java开发", "parent_id": 2
id: 5, name: "Go开发", "parent_id": 2
id: 6, name: "Vue", "parent_id": 3