vue中 v-for循环el-date-picker 动态绑定及数据显示

哆啦A梦爱吃鱼

于 2024-08-05 15:02:24 发布

阅读量233

点赞数 4

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/shanshanbao/article/details/140926707

版权

vue中 v-for循环el-date-picker 动态绑定及数据显示

在这里插入图片描述

 <div class="box" v-for="(item,index) in infoList" :key="index">
    <el-form style="margin-left: 16px;" size="small" ref="form" label-position="left" label-width="70px">
      <el-form-item label="回放">
        <el-date-picker style="width: 300px;" @input="(val)=>handleTime(val,index)"
          value-format="yyyy-MM-dd HH:mm:ss" v-model="item.value" :default-time="['00:00:00', '23:59:59']"
          type="datetimerange" range-separator="至" start-placeholder="开始年月日" end-placeholder="结束年月日">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>

 data() {
      return {
        infoList: [],
      };
    },
    activated() {
      this.queryCam()
    }`

    methods: {
    
      queryCam() {
        var that = this;
       
        $.ajax({
          type: "GET",
          url: that.otherurl,
          data: {
            org: data.org,
            condition: JSON.stringify(data.condition)
          },
          headers: {
            Authorization: window.token
          },
          contentType: "application/json",
          success: function (res) {
            var arr = [];
            if (res.ErrCode === 0) {
              that.infoList = res.Result.InfoList;
              that.$nextTick(() => {
                that.infoList.forEach((item, index) => {
               
                  item.value = []

              })
              console.log(that.infoList, '数据')
            }
          }
        });
      },
      handleTime(val, index,) {
        <!-- 重要 -->
        this.$forceUpdate();
        this.infoList[index].value = val
      }
    }
  }