-
实用干货
对于前端页面,某个业务实体,可能需要实现多级选择下拉框或者树形选择下拉框,这我们就可以直接使用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
}
-
结论
发布文章的初衷:
-
打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。
-
遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。
感谢大家关注从此让解决问题的你不再孤单!