第一部分:前端部分
最终效果
数据库数据
Element Ui 的Cascader 级联选择器数据应用:
<el-cascader
v-model="value"
:options="dep_jobs"
:props="{ expandTrigger: 'hover',value:'id',label:'classname' }"
@change="handleChange">
</el-cascader>
说明:
Cascader默认调用的是 :options绑定的数据源里面的value及label。
这里可以通过props配置绑定的对应键名。我这里value对应数据库中的id,label对应我的classname