vue ＋elementui 常见问题的解决方法

表单内input不实时刷新

this.$forceUpdate();解决

表单校验不清除

this.$refs.form.resetFields();解决

代码不异步

this.$nextTick(() => {

代码

});解决

elementui 表单数字校验失效

当我用{ type: 'number', message: '数量必须为数字'}给input框加了校验时，输入数字也会触发数量必须为数字的校验，这时给input 从v-model 改为v-model.number就正常了。

如果该input输入框不是必填，但是又需要加数字验证，建议用

var validateNumber = (rule, value, callback) => {

console.log("value:" + value);

if (!value) {

callback();

} else if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {

callback(new Error("请输入数字值"));

} else {

callback();

}

};

用v-if引起的表格列排版顺序错乱

为用了v-if的表格列增加:key="Math.random()"

循环input数字验证（只适用于非必填）

οninput="value=value.replace(/[^\d]/g,'')"加到v-model下面即可

级联选择器数据处理

当后端接口给我们的数据里面的字段与elementUI级联选择器需要的value，label，等字段不一样时。

//html
<el-cascader
                ref="cascaderAddr"
                :options="options"
                v-model="queryParams.streetArea"
                :show-all-levels="false"
                :props="{ emitPath: true }"
                placeholder="请选择所属区域"
                filterable
              ></el-cascader>

//js
 created() {
    getStreet().then((res) => {
      let list = res.data;
      let list1 = list.map((item) => this.filterChild(item));
      this.options = list1;
    });
  },
methods: {
    filterChild(item) {
      const child = item.children || [];
      if (child.length > 0) {
        return {
          value: item.id,
          label: item.name,
          children: child.map((i) => this.filterChild(i)),
        };
      } else {
        return {
          value: item.id,
          label: item.name,
        };
      }
    },

修改虚线间距宽度

<div class="border"></div>


.border{
  margin-bottom: 34px;
  padding: 1em;
  border-bottom: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.5em, white 0, white 0.75em);
}

设置滚动条样式

::v-deep .el-table__body-wrapper {
  overflow-y: scroll;
}

::v-deep ::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::v-deep ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: transparent;
}
::v-deep ::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: hsla(220, 4%, 58%, 0.3);
}

时间选择器之间联动

<el-row>
          <el-col :span="12">
            <el-form-item label="开始时间:" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="date"
                :picker-options="pickerOptionsStart"
                placeholder="请选择开始时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间:" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="date"
                :picker-options="pickerOptionsEnd"
                placeholder="请选择设备结束时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.form.endTime;
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime(); //getTime()函数将时间转换为时间戳
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.form.startTime;
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime();
          }
        },
      },

日期格式化封装工具

// 日期封装工具
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

使用方法

date = parseTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),'{y}-{m}-{d}')

获取当前日期的前七天并合并成一个数组

//获取前7天
    beforeSixDay(type) {
      var date = new Date();
      const dayList = [];
      for (let i = 0; i <= 6; i++) {
        date.setDate(date.getDate() - (i > 1 ? 1 : i));
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (type == "year") {
          var time = year + "-" + month + "-" + day;
        } else if (type == "month") {
          var time = month + "-" + day;
        }
        dayList.push(time);
      }
      return dayList.reverse();
    },


//使用
this.beforeSixDay('year')