//这里v-model获取的是value值
当前位置:   article > 正文

系列教程之element点击按钮获取select多选框的值_el-select获取多选的值

el-select获取多选的值
  1. <div id="app">
  2. <el-select v-model="opvalue" placeholder="请选择"> //这里v-model获取的是value值
  3. <el-option
  4. v-for="item in options"
  5. :key="item.value"
  6. :label="item.label"
  7. :value="item.value">
  8. </el-option>
  9. </el-select>
  10. <el-button type="success" @click="getdata">提交</el-button>
  11. </div>
  1. <script>
  2. new Vue({
  3. el: '#app',
  4. data() {
  5. return {
  6. options: [{
  7. value: '1',
  8. label: 'java'
  9. }, {
  10. value: '2',
  11. label: 'c++'
  12. }],
  13. opvalue: [] ,
  14. mylabel:'',
  15. calendarData: [] //赋值
  16. };
  17. },
  18. methods: {
  19. getdata(){
  20. this.mylabel=''; //置空
  21. //获取label值
  22. for(let key in this.options){
  23. let obj = this.options.map((item)=>{
  24. if(item.value===this.opvalue[key]){//如果是this.opvalue,只能获取单个值
  25. this.mylabel+=item.label
  26. }
  27. })
  28. }
  29. let params={
  30. value:this.opvalue,
  31. label:this.mylabel
  32. };
  33. console.log(params)
  34. //将值赋给calendarData,日期个位前有0,如06
  35. // calendarData: [
  36. // { months: ['06', '11'],days: ['15', '18'],things: '看电影' },
  37. // { months: ['10', '11'], days: ['02'],things: '去公园野炊' },
  38. // { months: ['11'], days: ['02'],things: '看星星' },
  39. // { months: ['11'], days: ['02'],things: '看月亮' }
  40. // ],
  41. var now = new Date(); //当前日期
  42. var nowDay = now.getDate(); //当前日
  43. var nowMonth = now.getMonth()+1; //当前月,这里是0到11
  44. var nowYear = now.getFullYear(); //当前年
  45. var months = [];
  46. var days = [];
  47. months.push(nowMonth.toString().replace(/^(\d)$/,'0$1')) //数字转成字符串,使用正则表达式在个位补0
  48. days.push(nowDay.toString().replace(/^(\d)$/,'0$1'))
  49. let results = {
  50. months: months,
  51. days: days,
  52. things:this.mylabel
  53. }
  54. this.$set(this.calendarData, 0, results)
  55. //this.calendarData.splice(1)
  56. }
  57. }
  58. })
  59. </script>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/107291
推荐阅读
相关标签