elementui 使用总结

1.  错误: TypeError: _self.$scopedSlots.default is not a function

   原因:这是因为在v-for/v-if切换标签时，原本这些标签每一个都是独立的 ，如果不添加key来区分则会出现复用的情况。故，需要添加key来做区分。如下:

   解决: <el-table key='ticketTable' v-if="isShowTicket"></el-table>

 

 

2. 问题:  使用时间插件,进行表单验证时每次选择事件就报value.getTime is not a function 如下图:

 

            

 

　　　　解决办法:

　　　　将验证方法

　　　　startDate: [
   　　　　                 {
                      　　　　  type: "date",
                      　　　　  required: true,
                       　　　　 message: "请选择日期",
                      　　　　  trigger: "change"
                    　　　　}
               　 ],

　　　　中的type: "date",改为 type: "string",

　　　　　　startDate: [
                  　　　　  {
                  　　　　 　　     type: "string",
                     　　　　　　   required: true,
                    　　　　　　    message: "请选择日期",
                     　　　　　　   trigger: "change"
                   　　　　 }
              　　  ],

 

 

3. el-select   问题1:     赋值显示 id 不展示名称   解决办法:  查看id 类型是否跟绑定id 类型是否一致

                    问题2:   el-select 设置默认值后选项无法切换

                    解决:     changeSel(){
               　　　　　　 this.$forceUpdate();
           　　　　　　 },

 

4.  问题: table 表格有些许的错位

　　　　解决办法:body .el-table th.gutter{　display: table-cell!important;}

 5. 问题:table header 边框线丢失

                 解决办法 : 横向丢失  .el-table td:not(.is-hidden), .el-table th.is-leaf:not(.is-hidden){   bottom:1px;  }

                                   纵向丢失   .el-table__row{ td:not(.is-hidden):last-child{right:-1px;} }

 

6.  问题:table 表格内容多一根线

 .el-table::before { z-index: inherit; }

7. 时间限制

    <el-form-item label-width="0px" style="width:100%">
      <el-date-picker
        v-model="nodeForm.memoDate"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        type="date"
        placeholder="选择日期"
        :clearable="false"
        style="width:100%"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label-width="0px" style="width:100%">
      <el-time-picker
        v-model="nodeForm.memoTime"
        :picker-options="timeOptions"
        value-format="HH:mm"
        format="HH:mm"
        placeholder="选择时间"
        :clearable="false"
        style="width:100%"
      ></el-time-picker>
    </el-form-item>

   pickerOptions: {
//日期禁止
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 8.64e7;
        }
      },
       //时间禁止
      timeOptions: {
        selectableRange: "00:00:00 - 23:59:59"
      }


  watch: {
    "nodeForm.memoDate": {
      handler(newValue) {
        if (newValue) {
          let str = "";
          if (this.dayjs().format("YYYY-MM-DD") == newValue) {
            // 是今天,选择 的时间开始为此刻的时分秒
            str = this.dayjs()
              .add(1, "minute")
              .format("HH:mm:ss");
          } else {
            // 明天及以后从0时开始
            str = "00:00:00";
          }
          this.timeOptions.selectableRange = str + " - 23:59:59";
          console.log(this.timeOptions.selectableRange);
          //例如：如果今天此刻时间为10:41 则选择时间范围为： 11:41 - 23:59
          //否则为：00:00:00- 23:59:59
        }
      },
      deep: true
    }
  },

 备注: 报错: Error in callback for watcher "value": "Error: Invalid Date in fecha.format" 解决方案: 即使展示十分 但在做限制时也要加上秒否则就报错