【无标题】Js ＜el-option＞中的value绑定多个值

最新推荐文章于 2024-06-19 12:00:39 发布

jhh_seven

最新推荐文章于 2024-06-19 12:00:39 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： javascript 前端 sql

本文链接：https://blog.csdn.net/weixin_46801232/article/details/127415579

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Js 中的value绑定多个值
方案一：使用label后使用遍历options.quarterOptions去匹配

      <el-form-item label="季度">
        <el-select v-model="query.quarter" placeholder="请选择">
          <el-option v-for="(item,index) in options.quarterOptions"
                     :label="item.label"
                     :value="item.label"
                     :key="index">
          </el-option>
        </el-select>
	  data(){
	    return{
	      options:{
	        quarterOptions:[]
	      },
	    }
	  }
      
      if(this.query.quarter){
        this.options.quarterOptions.forEach((option) => {
          if (option.label == this.query.quarter) {
            let start = option.start //注意此处quarterOptions的返回数据字段是sart，不是startDrCalculateTime 
            let end = option.end
            param.startDrCalculateTime = new Date(Date.parse(start)).format("yyyy/MM/dd hh:mm:ss")
            param.endDrCalculateTime =  new Date(Date.parse(end)).format("yyyy/MM/dd hh:mm:ss")
            alert(param.startDrCalculateTime)
            alert(param.endDrCalculateTime)
          }
        })
      }

方案二：用value进行字符串拼接，后续再使用split拆开，使用数据去存取。

<el-form-item label="季度">
        <el-select v-model="query.quarter" placeholder="请选择">
          <el-option v-for="(item,index) in options.quarterOptions"
                     :label="item.label"
                     :value=""
                     :key="index">
          </el-option>
        </el-select>
	  data(){
	    return{
	      options:{
	        quarterOptions:[]
	      },
	    }
	  }
	 if(this.query.quarter){
        let quarterArray =this.query.quarter.split("/")
        alert(quarterArray)

        param.startDrCalculateTime = new Date(Date.parse(quarterArray[0])).format("yyyy/MM/dd hh:mm:ss")
        param.endDrCalculateTime = new Date(Date.parse(quarterArray[1])).format("yyyy/MM/dd hh:mm:ss")
        alert(param.startDrCalculateTime)
        alert(param.endDrCalculateTime)
      }