vue3和Element-Plus实现树形下拉框

• 实用干货

   对于前端页面，某个业务实体，可能需要实现多级选择下拉框或者树形选择下拉框，这我们就可以直接使用element里的<el-cascader></el-cascader>组件来实现

• 干货详细

   此次项目是使用vue3和elment-plus来实现树形下拉框

• 

使用<el-cascader></el-cascader>组件

<el-form-item>    <el-cascader v-model="state.queryParams.id" :show-all-levels="false" :props="props" :options="state.data" /></el-form-item>

组件中绑定的数据

<script setup lang='ts'>import { ref, reactive } from 'vue';const state = reactive({    tableData: [],    queryParams: {        page_index: 1,        page_size: 10,        article_name: '',        article_group_id: null    } as any,    total: 0,    menuList: [] as any,    data: [{        "id": 24,        "menu_name": "加入机构",    },{        "id": 1,        "menu_name": "写作课程",        "children": [{            "id": 11,            "menu_name": "公益讲座",        }, {            "id": 13,            "menu_name": "理论训练营",            "children": [{                    "id": 31,                    "menu_name": "中文理论训练营",                }, {                    "id": 32,                    "menu_name": "英文理论训练营",                }]},                 {            "id": 12,            "menu_name": "实战训练营",            "children": [{                    "id": 41,                    "menu_name": "中文实战训练营",                },{                    "id": 34,                    "menu_name": "英文实战训练营",                },]        }, {            "id": 18,            "menu_name": "中文实战",        }]    }, {        "id": 8,        "menu_name": "科研工具",        "children": [{            "id": 10,            "menu_name": "期刊查询",        }, {            "id": 7,            "menu_name": "期刊导航",        }]    }, {        "id": 5,        "menu_name": "学员社区",    }],});</script>

因为el-cascader的默认值是label和value,所以我们使用时可以修改它的默认值

const props = {    label: "menu_name",    value: "id",    emitPath: false,    checkStrictly: true}

• 结论

发布文章的初衷：

• 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。

• 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。

感谢大家关注从此让解决问题的你不再孤单！

​