| element | 您所在的位置：网站首页 › elformitem怎么给label赋值 › element |
element
|
elementui表单下拉选项大家都见过吧，选项内容可以自定义，可是如果要展示的是数据库里的内容就需要一点操作。 这是原始的样子：
代码如下： 我们需要的样子：
这里就是个cv操作一下就ok，不再赘述 2.定义一个函数来从数据库中查数据并赋值给“容器” a.在data()中准备个“容器”来接收方法查到的数据
通过this.options将查询到的数值放到里面(记得方法写在methods{}中)
v-for相当于增强for循环 :label---->想要在选项中展示的内容 :value---->这个选项对应的真正的值（因为存进去的其实是部门id，并不是部门名称。比如示例中区域对应的其实是shanghai） :key---->与value一致 代码如下： 4.在vue生命周期中调用函数相当于在页面加载时就调用查询函数，然后将结果显示在选项中（通过this调用） mounted() { //查询所在部门 this.getDeptname(); }, 完结撒花需要完整前端代码的自取： 系统管理 > 新增销售人员 提交 取消 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); }, }, } .handle-title{ line-height: 50px; } .el-textarea__inner{ height: 100px; } |
其中内容来自department表中的deptname字段
【本文地址】
公司简介
联系我们