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-optionv-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-optionv-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>

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

VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
element 表单下拉菜单点击上下箭头失效
element 表单下拉菜单点击上下箭头失效使用表单的Form-Item Slot 把label改成下拉菜单,然后点击箭头图标不触发下拉事件解决办法:el-form-item上一定要加上prop ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
html表单下拉菜单_HTML表单：下拉菜单
html表单下拉菜单 Drop-down menus are used on forms to capture responses for which there is one correct res ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
表单下拉框、表单修饰符（.lazy、.number、.trim）
表单下拉框知识点 v-model select 表单下拉框绑定 <div id="myApp"><h3>你最喜欢的NBA球星是:</h3>&l ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

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