动态for循环el-collapse-item手风琴效果,v-model以及时间控件的限制

 

历史详情里面还有要修改的表单

 

 

 后台返回的数据结构是

data:{
    entry:{},
    entryHistory:[{}]
}

<div v-for="(item, index) in contractForm.entryHistory" :key="index">
            <el-collapse-item
              :title="'历史入场详情信息 (' + item.entranceAt + ')'"
              class="process-collapse"
              :name="item.id + index"
              v-if="contractForm.entryHistory != null"
            >
              <el-row class="entryCont">
 <el-col :span="10" :offset="1">
                  <el-form-item label="入场时间:">
                    <div class="addressCont">
                      <div
                        class="addressContF"
                        v-if="!item.changeEntranceAtState"
                      >
                        {{ item.entranceAt }}
                      </div>
                      <div class="addressContF" v-else>
                        <el-date-picker
                          v-model="historyEntranceAtTime[index]"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期"
                          :editable="false"
                          :picker-options="item.startHitstoryoptions"
                        >
                        </el-date-picker>
                      </div>
                      <el-button
                        size="medium"
                        type="primary"
                        @click="changeHistoryEntranceAt(index)"
                        v-dbQkClick
                        v-if="
                          item.isTimeChangeState &&
                          (contractForm.talentInfo.status == 14 ||
                            contractForm.talentInfo.status == 7)
                        "
                      >
                        {{ !item.changeEntranceAtState ? '修改' : '提交' }}
                      </el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>

先给entryHistory里面每个对象加这两个状态控制显示隐藏

 this.contractForm.entryHistory = data.entryHistory

        if (this.contractForm.entryHistory?.length > 0) {
          this.contractForm.entryHistory.forEach((res) => {
            res.isTimeChangeState = this.isHistoryTimeChangeShow()
            res.changeEntranceAtState = false
          })
        }

点击切换按钮之后时间回显,核心点在于 v-model="historyEntranceAtTime[index]"   放到数组里面

 changeHistoryEntranceAt(index) {

this.contractForm.entryHistory[index].changeEntranceAtState =
        !this.contractForm.entryHistory[index].changeEntranceAtState

      this.$forceUpdate()
      if (this.contractForm.entryHistory[index].changeEntranceAtState) {
        this.historyEntranceAtTime[index] =
          this.contractForm.entryHistory[index].entranceAt
      }
      if (!this.contractForm.entryHistory[index].changeEntranceAtState) {
        if (
          this.contractForm.entryHistory[index].entranceAt ===
          this.historyEntranceAtTime[index]
        ) {
          this.$message({
            message: '入场时间切换前后不允许一致',
            type: 'error'
          })
          return false
        }
        if (!this.historyEntranceAtTime[index]) {
          this.$message({
            message: '入场时间切换不能为空!',
            type: 'error'
          })
          return false
        }
        this.contractForm.entryHistory[index].entranceAt =
          this.historyEntranceAtTime[index]
        let params = {
          ...this.contractForm.entryHistory[index]
        }

循环时间控件的限制:picker-options="item.startHitstoryoptions"

 watch: {
    'contractForm.entryHistory': {
      handler(list) {
        list.forEach((item) => {
          item.startHitstoryoptions = {
            disabledDate(time) {
              if (item.contractStartTime) {
                return (
                  time.getTime() <
                    new Date(item.lastEntranceAt).getTime() + 86400000 ||
                  time.getTime() < new Date(item.contractStartTime).getTime() ||
                  time.getTime() > new Date(item.contractEndTime).getTime() ||
                  time.getTime() >
                    new Date(item.nextEntranceAt).getTime() - 86400000  //- 86400000 相当于一天

 ) } } } }) }, deep: true } },

 

标签：entryHistory,控件,collapse,index,changeEntranceAtState,historyEntranceAtTime,contr
来源： https://www.cnblogs.com/lsc-boke/p/16642253.html