美文网首页
el-select绑定值为对象时,报错[Vue warn]: <

el-select绑定值为对象时,报错[Vue warn]: <

作者: 流泪手心_521 | 来源:发表于2020-08-26 21:16 被阅读0次

    问题是因为后台接口返回来的一个label是null,所以选中的时候会报错
    1.结构

    <div class="clear" v-if="item.remindType==2&&showMoreRemind">
                            <el-form-item style="padding-left:15px;" prop="moreRemind" class="item-form-3 require-label">
                                <el-select v-model="remindForm.remindIntervalList" placeholder="请选择" multiple
                                            @change="getRemindTime" :disabled="operationType === 'view'" >
                                    <el-option v-for="option in item.dicts"
                                               :key="option.dictName+index"
                                               :label="option.dictName"
                                               :value="option.label"
                                    >
                                    </el-option>
                                    <el-option value="custom" label="自定义" v-if="isCustom===true"></el-option>
                                </el-select>
                                <span class="tip">周期内提醒:针对跨天日程,在开始时间每日的同一时间进行提醒</span>
                            </el-form-item>
                            <el-form-item prop="IntervalTimes" label="提前" class="item-form-4 mr-80"
                                          v-if="customTimeFlag===true">
                                <div class="customTimeInput">
                                    <el-input v-model.number="remindForm.customTimeD" type="IntervalTimes" maxlength="2"
                                              style="padding:0; width: 80px;"></el-input>
                                    &nbsp;&nbsp;&nbsp;天&nbsp;&nbsp;&nbsp;
                                    <el-input v-model.number="remindForm.customTimeH" type="IntervalTimes" maxlength="2"
                                              style="padding:0; width: 80px;"></el-input>
                                    &nbsp;&nbsp;&nbsp;小时&nbsp;&nbsp;&nbsp;
                                    <el-input v-model.numder="remindForm.customTimeM" type="IntervalTimes" maxlength="2"
                                              style="padding:0; width: 80px;"></el-input>
                                    &nbsp;&nbsp;&nbsp;分钟&nbsp;&nbsp;&nbsp;
                                </div>
                            </el-form-item>
                        </div>
    ``
    ![image.png](https://img.haomeiwen.com/i7492009/ba60561752c62aef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    2.思路是修改的时候,在详情返回的时候把null修改-3或其他的不是null,underfunded就行,然后再保存的时候再把-3修改成null提交给后台,因为之前给后台约定的是null,(记得以后千万别让后台返回什么null,underfunded这样的特殊,如果返回会把前端坑死不可)
    

    searchDetails(obj) {
    let params = {id: obj.id};
    http.get('/task/taskDetail', params)
    .then((res) => {
    if (res.status === 0) {
    this.attchList = res.data.fileList.length ? [{
    name: res.data.fileList[0].fileName,
    url: res.data.fileList[0].filePath
    }] : [];
    this.fileInfo = (res.data.fileList.length && res.data.fileList[0]) || {};

                          //回显自定义input值
                            let timeArr = [];
                            for (let i = 0; i < this.myRemindList.length; i++) {
                                for (let k = 0; k < this.myRemindList[i].dicts.length; k++) {
                                    if (this.myRemindList[i].remindType == 2) {
                                        timeArr.push(this.myRemindList[i].dicts[k].label)
                                    }
                                }
                            }
                            //过滤出来只有自定义
                            let newTimeArr = [];
                            for (let n = 0; n < res.data.remindIntervalList.length; n++) {
                                if (timeArr.indexOf(res.data.remindIntervalList[n]) == -1&&res.data.remindIntervalList[n]!=null) {
                                    newTimeArr.push(res.data.remindIntervalList[n])
                                    break;
                                }
                            }
                            
                            //计算自定义input框的值
                            var date = parseInt(newTimeArr[0] / (24 * 60));
                            var hours = parseInt((newTimeArr[0] % (24 * 60)) / 60);
                            var minutes = (newTimeArr[0] % (24 * 60)) % 60;
    
                            //自定义回显选中(添加一个'custom' 字段识辨是自定义)
                            if (newTimeArr.length > 0&&newTimeArr[0]!=null) {
                                res.data.remindIntervalList.push("custom")
                            }
    
                            // 回显自定义和周期内
                            let _remindIntervalList=res.data.remindIntervalList;
                            for(let h= 0; h < _remindIntervalList.length; h++){
                                //是自定义
                                if(_remindIntervalList[h] === newTimeArr[0]&&_remindIntervalList[h] != null){
                                    _remindIntervalList.splice(h,1);
                                }
                                //是周期内
                                if(_remindIntervalList[h] === null){
                                    _remindIntervalList[h]=-3
                                }
                            }
    
                            this.remindForm = {
                                ...res.data,
                                remindTime: res.data.remindInterval,
                                fileList: res.data.fileList,
                                checked: res.data.isWholeDay === 1,
                                userId: '',
                                customTimeD: date,
                                customTimeH: hours,
                                customTimeM: minutes,
                                groupId: res.data.groupId,
                                remindIntervalList: _remindIntervalList,
                                remindType: Number(res.data.remindType), //回显必须number类型
                                repeatTimes: res.data.repeatTimes,
                                repeatType: res.data.repeatType,
                                remindInfos: res.data.remindInfos,
                            };
                        } else {
                            this.$message.error(res.message);
                        }
                    })
                    .catch((response) => {
                        console.log(response);
                    })
            },
    
    
    
    3.在保存的时候在修改回来,后台想要的数据
    
    

    addRemind() {

                //自定义时间监听的到值this.remindInterval替换数组中custom自定义添加给传给后台的数组中
                if (this.remindForm.remindIntervalList) {
                    for (let i = 0; i < this.remindForm.remindIntervalList.length; i++) {
                        if (this.remindForm.remindIntervalList[i] === 'custom') {
                            this.remindForm.remindIntervalList.splice(i, 1, this.remindInterval);
                        }
                    }
                }
    
                //自定义验证
                if (this.allDay === false) {
                    if (moment(startTime).valueOf() < Date.now()) {
                        return this.$message.error("所选时间不能早于当前时间,请重新选择")
                    }
                }
                //周期内过滤一下
                for(let b=0; b<this.remindForm.remindIntervalList.length;b++){
                    if(this.remindForm.remindIntervalList[b]==-3){
                        this.remindForm.remindIntervalList[b]=null;
                        break
                    }
                }
    
          }
    

    相关文章

      网友评论

          本文标题:el-select绑定值为对象时,报错[Vue warn]: <

          本文链接:https://www.haomeiwen.com/subject/pwgfsktx.html