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

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

这是原始的样子：

代码如下：

 <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

我们需要的样子：

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

正片开始

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

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

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

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

b.定义一个方法来查询

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

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

v-for相当于增强for循环

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

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

:key---->与value一致

代码如下：

<el-form-item label="所在部门">
        <el-select v-model="form.salerdeptid" style="width: 120px">
          <el-option
            v-for="item in options"
            :key="item.deptid"
            :label="item.deptname"
            :value="item.deptid">
          </el-option>
        </el-select>
 </el-form-item>

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

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

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

完结撒花

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

<template>
  <div class="container">
    <h2 class="handle-title">系统管理 > 新增销售人员</h2>
    <el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm" label-width="80px" style="width:430px">
      <el-form-item label="销售人员姓名" prop="usertruename">
        <el-input v-model="form.usertruename" style="width:190px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="销售人员推荐码" prop="salercode">
        <el-input v-model="form.salercode" style="width:190px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="销售人员银行开户行" prop="salerbankname">
        <el-input v-model="form.salerbankname" style="width:190px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="销售人员银行账户" prop="salerbanknum">
        <el-input v-model="form.salerbanknum" style="width:190px" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="form.salerauditstate" placeholder="请选择销售人员审核状态">
          <el-option label="可用" value="1"></el-option>
          <el-option label="不可用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在部门">
        <el-select v-model="form.salerdeptid" style="width: 120px">
          <el-option
            v-for="item in options"
            :key="item.deptid"
            :label="item.deptname"
            :value="item.deptid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核意见">
        <el-input type="textarea" v-model="form.salerauditdesc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">提交</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {addSaler, getSalerTeamList} from "../../api/orgAPI/api";
  import {getDepartmentList} from "../../api/public/api";
  export default {
    name: '',
    data() {
      return {
        form: {
          usertruename: '',
          salercode: '',
          salerbankname: '',
          salerbanknum:'',
          salerauditstate:'1',
          salerauditdesc:'',
          issaler:'1',
          salerdeptid:'',

        },
        options:[],
        rules: {
          usertruename: [
            { required: true, message: '请输入用户姓名', trigger: 'blur' }
          ]
        }
      }
    },
    deptnames:[],
    //value:"-1", //状态选择默认为 -1 表示全部

    mounted() {
      //查询所在部门
      this.getDeptname();
    },
    methods:{
      //新增销售人员
      onSubmit(formName) {
        let that = this;
        this.$refs[formName].validate((value)=>{
          console.log(value)
          if(value){
            console.log(that.form)
            let formData = new FormData();
            formData.append("usertruename",that.form.usertruename);
            formData.append("salercode",that.form.salercode);
            formData.append("salerbankname",that.form.salerbankname);
            formData.append("salerbanknum",that.form.salerbanknum);
            formData.append("salerauditstate",that.form.salerauditstate);
            formData.append("salerauditdesc",that.form.salerauditdesc);
            formData.append("issaler",that.form.issaler);
            formData.append("salerdeptid",that.form.salerdeptid);
            addSaler(formData).then((res)=>{
               //console.log(res)
              if(res.data.code == 1){
                that.$message({
                  message:"添加成功",
                  type:"success",
                })
                that.$router.push("/Saler")
              }else{
                this.$message({
                  message:"添加失败",
                  type:"info"
                });
              }
            })
          }
        })
      },
      //获得部门名称
      getDeptname() {
        getDepartmentList().then((res)=>{
          //console.log(res)
          this.options = res.data.datalist;
        })
      },
      //取消操作
      goBack() {
        this.$router.go(-1);
      },
    },
  }
</script>

<style>
  .handle-title{
    line-height: 50px;
  }
  .el-textarea__inner{
    height: 100px;
  }
</style>