后台数据，通过el-select组件el-option如何使用v-for动态渲染问题

一、效果截图：

二、代码示例 · 参考：

<el-row :gutter="0" class="el-item"><p class="rb-tit mt5">薪资</p>  <el-col :span="12"><p style="color:#999;font-size:14px;text-align:left;">最低薪资</p><el-form-item label="" size="small" class="selet mgl5"><el-select v-model="form.payLow" placeholder="不限" @change="jobExperienceChange"><el-option label="2K" value="2"></el-option><el-option label="3K" value="3"></el-option><el-option label="4K" value="4"></el-option><el-option label="5K" value="5"></el-option><el-option label="6K" value="6"></el-option><el-option label="7K" value="7"></el-option><el-option label="8K" value="8"></el-option><el-option label="9K" value="9"></el-option><el-option label="10K" value="10"></el-option></el-select></el-form-item>  </el-col><el-col :span="12"><p style="color:#999;font-size:14px;text-align:left;">最高薪资</p><el-form-item label="" size="small" class="selet mgl5"><el-select v-model="form.payHigh" placeholder="--" @change="jobExperienceChange">             <el-option label="2K" value="2"></el-option><el-option label="3K" value="3"></el-option><el-option label="4K" value="4"></el-option><el-option label="5K" value="5"></el-option><el-option label="6K" value="6"></el-option><el-option label="7K" value="7"></el-option><el-option label="8K" value="8"></el-option><el-option label="9K" value="9"></el-option><el-option label="10K" value="10"></el-option></el-select></el-form-item> </el-col></el-row><el-row :gutter="0" class="el-item"><p class="rb-tit mt5">学历</p>   <el-col :span="12"><p style="color:#999;font-size:14px;text-align:left;">最低学历</p><el-form-item label="" size="small" class="selet mgl5"><el-select v-model="form.educationLow" placeholder="不限" @change="jobExperienceChange"><el-option v-for="(item,index) in xls" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option></el-select></el-form-item>    </el-col><el-col :span="12"><p style="color:#999;font-size:14px;text-align:left;">最高学历</p><el-form-item label="" size="small" class="selet mgl5"><el-select v-model="form.educationHigh" placeholder="--" @change="jobExperienceChange"><el-option v-for="(item,index) in xls" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option></el-select></el-form-item>    </el-col></el-row> <el-row class="rb-tit mt5 sex-box el-item">性别  <el-dropdown @command="sexHandleCommand"><span class="el-dropdown-link" id="sex-dropdown">不限<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="null">不限</el-dropdown-item><el-dropdown-item command="M">男</el-dropdown-item><el-dropdown-item command="F">女</el-dropdown-item></el-dropdown-menu></el-dropdown>                               </el-row><script>
import axios from "axios";export default {name: "recruit",data() {return {form: {name: "", // 姓名sex: "M", // 性别telphone: "", // 联系方式age: "", // 年龄area: "0000340100,0000340100,0000340104,", // 求职地址jobIntention: "", //销售detailaddress: "", //详细地址jobyear: "1", // 工作年限salaryExp: "4", // 期望薪资education: [{ value: "0", label: "初中及以下" },{ value: "1", label: "高中" },{ value: "2", label: "大专" },{ value: "3", label: "本科" },{ value: "4", label: "硕士及以上" }], // 最高学历speciality: "", // 特长 优势jobWantedState: "离职随时到岗" // 求职状态},addressOptions: citys, // 工作地址labelWidth: "70px", // 统一定义label宽度loading: false // 刷新加载};},ajaxRegisterApi: function(form) {// 获取localStorage本地tokenvar key = localStorage.getItem("token");console.log("key=" + key);// 表单验证（略）var localPath = this.GLOBAL.localSrc; // 本地 接口地址var serverPath = this.GLOBAL.serverSrc; // 线上 接口地址axios.post(serverPath + "/jobs/upresume/",{resumeName: this.form.name, // 姓名sex: this.form.sex, // 性别phone: this.form.telphone, // 联系方式birthday: this.form.age, // 年龄jobIntention: this.form.jobIntention, // 求职意向location: this.form.detailaddress, // 求职地址 this.form.areaseniority: this.form.jobyear, // 工作年限salaryExp: this.form.salaryExp, // 期望薪资education: this.form.education, // 最高学历remarks: this.form.speciality, // 特长 优势jobWantedState: this.form.jobWantedState // 在职状态},{headers: {"Content-Type": "application/json",Authorization: key}}).then(function(response) {//console.log(response);var reslutData = response;localStorage.setItem("token", response.headers.authorization); // token 复写本地 localStorageif (response.data.code == "0") {this.$message({type: "warning",message: "上传错误"});}if (response.data.code == "2010") {this.$message({type: "warning",message: "简历已经存在在简历库中,不可重复上传"});}if (response.data.code == "200") {this.$message({type: "success",message: "简历分享成功"});}}.bind(this)).catch(function(error) {console.log("请求失败" + error);});this.getresume();}},getresume() {var key = localStorage.getItem("token");console.log("key=" + key);axios.post(ecsPath + "/jobs/listMyUpResume/",{resumeName: "zhangsan"},{headers: {"Content-Type": "application/json",Authorization: key}}).then(function(response) {var resultData = response;console.log(response.data);if (response.data.code == "4007") {// 未登陆执行跳转this.$router.push({path: "/login"});}this.resumes = response.data.data.resumes;localStorage.setItem("token", response.headers.authorization); // token 复写本地 localStorage}.bind(this)).catch(function(error) {console.log("请求失败" + error);});},}
};
</script><style>
/* 样式省略 */
</style>

三、相关阅读：

element 中的el-radio 在用v-for渲染时，value为空

以上就是关于“ el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇 ” 的全部内容。

el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇相关推荐

微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
修改element UI的select下拉框组件右边的小箭头（使用自定义图片）
i.el-select__caret {/*很关键:将默认的select选择框样式清除*/ appearance:none;-moz-appearance:none;-webkit-appearanc ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
iview select选中值取值_完美解决iview 的select下拉框选项错位的问题
在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉框组件.但是当弹出框超过一屏需要滚动时,select的下拉选项会出现错位(下图1为正常,图2为滚动后,下拉选项错位.) ...
iview select 怎么清空_如何解决iview 的select下拉框选项错位的问题，具体操作如下...
下面我就为大家分享一篇完美解决iview 的select下拉框选项错位的问题,具有很好的参考价值,希望对大家有所帮助. 在使用iview的过程中,我遇到这样一个问题,在Model中使用select下拉 ...
点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
Layui实现动态生成select中的option项,同时设置select下拉框选中项
项目场景: 主要用于为民族select下拉框动态生成option值,同时在实现编辑功能时,表单中的select下拉框的选中项为后台传过来的数据. 举例: 如下图所示的表单内容,下图的民族和政治面貌se ...
Vue中select下拉框的默认选中项的三种情况
在Vue中使用select下拉框主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值而不是空白,比如显示 &qu ...
Ant Design select下拉框突然拉长
Ant Design select下拉框在弹窗中被拉长在使用react+Ant Design的开发中使用select下拉框遇到了以下情况在弹窗里面 ,表单内容较多出现了下拉条,然后在点击搜索框输 ...
Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑源码:https://gitee.com/charlinchenlin/ ...

el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇

文章目录

后台数据，通过el-select组件el-option如何使用v-for动态渲染问题

一、效果截图：

二、代码示例 · 参考：

三、相关阅读：

el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇相关推荐

最新文章

热门文章