浅谈Vue Element中Select下拉框选取值的问题
5星 · 超过95%的资源 99 浏览量
2020-08-27
22:29:05
上传
评论
收藏 52KB PDF 举报 
浅谈浅谈Vue Element中中Select下拉框选取值的问题下拉框选取值的问题
下面小编就为大家分享一篇浅谈Vue Element中Select下拉框选取值的问题，具有很好的参考价值，希望对大家
有所帮助。一起跟随小编过来看看吧
之前写了.一个原生的select的，因为展示效果原因，给删除掉了，忘记保存代码了，现在大家展示使用elementUI的下拉框封
装一个组件，供咱们项目中经常调用，减少代码量。
html：：
<el-select v-model="ite" placeholder="请选择" value-key="mateGroup">
<el-option style="width: auto" :disabled="true" :value="null">
<span style="float: left;font-weight: bold">周次 </span>
<span style="float: left; color: #8492a6; font-size: 13px; font-weight: bold"> 开始日期 </span>
<span style="float: right; color: #8492a6; font-size: 13px; font-weight: bold"> 截止日期 </span>
</el-option>
<el-option v-for="(item,index) in res" :key="index" :label="item.mateGroup" v-bind:value="item">
<span style="float: left; color: #8492a6; font-size: 13px">{{ item.mateGroup }} </span>
<span style="float: left; color: #8492a6; font-size: 13px"> {{ item.weekStartDate }} </span>
<span style="float: right">{{ item.weekEndDate }}</span>
</el-option>
</el-select>
Js：：
<script>
import jQuery from 'jquery'
export default {
props: ['orgCode', 'farmOrg'],
data () {
return {
res: [],
ite: '',
weekse: ''
}
},
created: function () {
var _self = this
_self.getWeekYearly()
},
watch: {
ite: function (val) {
this.weekse = val
console.log(this.weekse)
this.getL()
}
},
methods: {
getWeekYearly () {
var _self = this
jQuery.ajax({
url: '/standard/' + _self.orgCode + '/' + _self.farmOrg + '/getWeekly',
type: 'GET',
// contentType: 'application/json',
dataType: 'json',
success: function (res) {
_self.res = res
},
fail: function (e) {
// this.tableFlag = false
alert('请求失败')
console.log('查询失败')
}
})
},
getL: function () {
var _self = this
_self.$emit('getL', _self.weekse)
}
}
}
</script>
下来我给大家说一下这个页面都做了什么下来我给大家说一下这个页面都做了什么-
a、在页面刚开始加载时候，通过create 调用了我们的一个方法。发送ajax.获取到下拉框该显示的值。
weixin_38628830
- 粉丝: 3
- 资源: 954
最新资源
- 基础算法-python爬楼梯问题
- 某音Web端参数X-Bogus获取算法（逆向分析）
- 头歌答案 C语言程序设计实践 实验二 数据类型与基本操作（1）
- java高校实习生管理系统设计和实现springboot+vue毕业设计源码+数据库mysql代码.rar
- springboot+vue.js辽B代驾管理系统java毕业设计源码+数据库代码.rar
- OceanBase OBCA初级考试认证资料
- java可信捐赠管理系统的设计与开发springboot+vue毕业设计源码+数据库代码.rar
- vue基于Springboot的网上宠物店系统的设计与实现java毕业设计源码+数据库代码.rar
- OceanBase OBCA 部分题目
- vue基于springboot的七彩云南文化旅游网站的设计与实现java毕业设计源码代码+数据库.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页