vue中下拉列表调用数据库显示

下拉列表可以显示多样搜刮前提，良多查询信息的时辰城市用到，经由过程读取数据库中的数据来完当作下拉列表的显示，既连结了和数据库中数据的同步，也便利维护

东西/原料

• 电脑
• 编纂器

方式/步调

1. 1

   起首列出下拉控件el-cascader，可以做当作单列下拉列表，也可以做当作，带有子项的下来列表

   
2. 2

   将空间界说属性是下拉列表v-model="selectedOptions"，默认的显示信息placeholder="请选择"，change-on-selectexpand-trigger="hover"等属性

   
3. 3

   经由过程options=specOption来给下来列表的赋值，在data() {  return {中界说 specOption[],数组

   
4. 4

   界说fillAllDictionary()方式，将方式放在created中，加载的时辰就可以或许给下拉列表赋值

   
5. 5

   在fillAllDictionary中界说函数经由过程前提在字典表返回查询数据const data = response.dataconsole.log("获取单元地点地区下拉框",data)if (data.issuccess) {  let newdata=data.data

   
6. 6

   在返回的数据中再挪用filterDicts方式解析数据赋值给specOption数组

   this.specOption=filterDicts(newdata,"speciality","-1")   //所属学科