Vue3 + Element Plus + Spring Boot + MySQL实现Cascader级联选择器

TPro

已于 2024-02-04 21:54:58 修改

阅读量945

点赞数 15

分类专栏： vue3+element-plus 文章标签： spring boot mysql 后端 vue elementui

于 2024-01-30 20:33:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49083531/article/details/135940393

版权

本文详细描述了如何通过Vue的Cascader组件配合TS编程实现点击父标签时动态加载子标签的功能，涉及前后端数据交互和数据库表设计

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先展示最终效果：
在这里插入图片描述
需求：点击某一父级标签，可以相应的展示出该父级标签下的子标签。
实现步骤及对应代码块：

Vue文件中

Cascader代码片段

1. 前端页面结构

<el-form-item label="用户标签" prop="tags">
    <el-cascader :props="data.props" v-model="data.value" style="width: 300px"
        placeholder="请选择标签"></el-cascader>
</el-form-item>

2. TS代码片段

const data = reactive({
   
    value: [],
    cascaderVal: [],
    props: {
   
        lazy: true,
        lazyLoad: (node: {
    level: any; value?: any; }, resolve: (arg0: any[]) => void) => {
   
            const {
    level } = node;
            const nodes: {
    value: any; label: any; leaf: boolean; }[] = [];
            if (level == 0) {
   
                // 后端接口
                request.get('/tag/treeTest').then((res) => {
   
                    res.data.map((item: {
     id: any; tagname: any; }) => {
   
                        let obj = {
   
                            value: item.id,