element-ui表单下拉选项展示来自数据库的内容

elementui表单下拉选项大家都见过吧，选项内容可以自定义，可是如果要展示的是数据库里的内容就需要一点操作。

这是原始的样子：

代码如下：

我们需要的样子：

其中内容来自department表中的deptname字段

正片开始

1.将element-ui组件添加进前端页面

这里就是个cv操作一下就ok，不再赘述

2.定义一个函数来从数据库中查数据并赋值给“容器”

a.在data()中准备个“容器”来接收方法查到的数据

 b.定义一个方法来查询

通过this.options将查询到的数值放到里面(记得方法写在methods{}中)

 3.通过循环将“容器”的值展示在选项中

 v-for相当于增强for循环

:label---->想要在选项中展示的内容

:value---->这个选项对应的真正的值（因为存进去的其实是部门id，并不是部门名称。比如示例中区域对应的其实是shanghai）

:key---->与value一致

代码如下：

4.在vue生命周期中调用函数

相当于在页面加载时就调用查询函数，然后将结果显示在选项中（通过this调用）

mounted() {
      //查询所在部门
      this.getDeptname();
    },

完结撒花

需要完整前端代码的自取：