element ui 常用功能一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。(juejin.cn/post/705288… "juejin.cn/post/705288…

1. element ui 弹层通过$ref 拿到 dom

需要拿到element ui中的table dom节点

但是打印看到的是 this.$refs.goodslistRef = undefined

在dialog 弹层设置为true的时候就可以拿到dom了

this.$nextTick(_ => {
        console.log("this.$refs.goodslistRef", this.$refs.goodslistRef); // 获取el-dialog中的table        
});

2. DateTimePicker 日期时间选择器禁用以前的功能以及格式：

项目需求是:选择日期和时间,只能选择当前时间以后的时间,禁用最小级别到分钟.

先看第一个属性type：设置type为datetimerange即可选择日期和时间范围

这里有个需要注意的点：就是值的格式默认是2022-02-24T16:00:00.000Z 这种，但是后端一般需要的是2022-02-28 12-00-00，然后我们又去用格式化函数处理这样就多此一举了

以前就写过这样的代码 so多看文档在写功能看看有没有现成可以直接调用的

设置过去时间：

disabledDate ：控制只能选择今天及以后的日期

使用参数picker-options

1. 核心的代码就是这两句

picker-options="expireTimeOption"

   expireTimeOption: {
        disabledDate(date) {
          return date.getTime() <= (Date.now() - (24 * 60 * 60 * 1000));
        }
      },

设置日期其他写法：

或者是：

  disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },

还可以这样：

disabledDate(time) {

            var date=new Date();

             date.setFullYear(date.getFullYear()+2);

             date.setDate(date.getDate()-1);

                 return (time.getTime() < Date.now() - 8.64e7)||(time.getTime()>date.getTime());

          }

               <el-date-picker
                    @change="upShopTime"
                    v-model="columnFormData.publishTime"
                    type="datetime"
                    placeholder="请选择上架展示时间"
                    format="yyyy-MM-dd HH-mm-ss"
                    value-format="yyyy-MM-dd HH-mm-ss"
                    default-time="12:00:00"
                    :picker-options="expireTimeOption"
                  >
                  </el-date-picker>

但是怎样禁用时分秒呢？

建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差），看个人吧

selectableRange ：控制选择的时间段。如果是今天，则时间从此刻开始，否则从0时开始

最终版本：

// time-arrow-control 时分秒是以箭头形式 
  <el-date-picker
                    @change="upShopTime"
                    v-model="columnFormData.publishTime"
                    type="datetime"
                    placeholder="请选择上架展示时间"
                    format="yyyy-MM-dd HH-mm-ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="12:00:00"
                    :picker-options="expireTimeOption"
                  >
 </el-date-picker>

注意：pickerOptions1在data里面，而不是methods里面。


data：加：


 expireTimeOption: {
        disabledDate(date) {
          return date.getTime() <= Date.now() - 24 * 60 * 60 * 1000;
        },
        selectableRange: (() => {
          let data = new Date();
          let hour = data.getHours();
          let minute = data.getMinutes();
          let second = data.getSeconds();
          return [`${hour}:${minute}:${second} - 23:59:59`];
         })()
      },

但是呢还是有点小缺陷是没有禁用到s秒的

加一个,点击确定时候是最新的秒数

 //如果选择的时间是以前的 那么会当做当前时间
      var startAt = new Date(this.formMagicData.publishTime) * 1000 /1000;
        if(startAt < Date.now()) {
            this.formMagicData.publishTime = parseTime(new Date());
      }
      console.log('提交的时间',this.formMagicData.publishTime);

但是bug又来了点击此刻的时候发现数据没有赋值上去

清除此刻

 <el-date-picker
:popper-class="'currentDatePickerClass'"
</el-date-picker>

.currentDatePickerClass > .el-picker-panel__footer > .el-button--text:first-child{ display: none; }

直接全局修改：

.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn { display: none; }

取消单个校验结果以及对单个进行校验


     this.$refs["ruleFormRef"].validateField("productCoupons");
        this.$refs["form"].clearValidate(["productCoupons"]);

   this.$refs["addresFormRef"].validateField("zuojiNumber", (Error) => {
          if (!Error) {
            //执行
          } else {
            console.log("成功！！！");
          }
        });

# elementUI如何动态取消表单验证的红心？

把rules从data中拿出来，写在计算属性里面，动态通过参数控制required和规则

element ui 常用功能