Element-ui

1清除el-from表单信息

if (this.$refs['searchForm'] !== undefined) {
	this.$refs['searchForm'].resetFields()
}

2穿梭框 内容太长显示…，鼠标移动上去显示全部

.el-tree-node__label{
	overflow: hidden; 
	word-break: keep-all; 
	white-space: nowrap; 
	text-overflow: ellipsis; 
}
@mouseover.native="addTitle"
addTitle(e) {
 	const target = e.target 
	if (target.title) {
		return target.title = target.innerText 
	}
},

3 el-date-picker时间插件获取值格式问题

<el-date-picker 
v-model="selectDatetime" 
type="datetime" 
placeholder="选择时间" 
@change="dataSearch" 
value-format="yyyy-MM-dd HH:mm" 
format="yyyy-MM-dd HH:mm">
 </el-date-picker> 
//在日期控件中，加入上述加粗格式即可

4 el-date-picker设置未来的时间不可选

<el-date-picker 
v-model="record.beginDate"
 type="date" 
value-format="yyyy-MM-dd"
 placeholder="选择日期"
:picker-options="expireTimeOption"
style="width: 40%">

data(){ 
return {
 expireTimeOption: { 
	disabledDate (date) {
	 	// disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean 
		return date.getTime() >= Date.now()
	 }
 }, 
} 
}

5 el-input实现中文和英文的正则校验

//(1)校验中文字段的代码
rules: {
        title: [
          { required: true, message: "请输入中文的标题", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
              if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                callback(new Error("请输入中文"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
}
//(2)校验必须为英文的正则

rule:[
   subsysShow: [
          { required: true, message: "请输入英文的组件名", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              //  校验英文的正则
              if (/[a-zA-z]$/.test(value) == false) {
                callback(new Error("请输入英文"));
              } else {
                //校验通过
                callback();
              }
            },
            trigger: "blur"
          }
        ],
]

//Message 设置弹窗时长 和 关闭事件 
 Message.error({
        showClose: true,
        message: message,
        duration: 1000,
        type: 'error',
        onClose: () => {
        console.log('aoaimaomao')
        },
      })

el-date-picker monthrange 只能选择当前月-明年当前月

特别注意：一定要减去当前月已经过去的天数，不然 ，当前月选中了，弹窗不会消失， 但不回显数据

  <el-date-picker
          v-model="schedulingDate"
          type="monthrange"
          range-separator="~"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          size="small"
          :picker-options="pickerOptions"
        ></el-date-picker>

		pickerOptions: {
        // 限制年月
        disabledDate: time => {
          function add0(m) {
            return m < 10 ? "0" + m : m;
          }
          function setDate() {
            var time = new Date();
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            return y + "." + add0(m) + ".01";
          }
          const date = new Date(setDate());
          //在使用的时候会出现初始值选不中的情况，需要把初始值设置成当月的第一天的0点，才能选中，否则不能选中
          const year = date.getFullYear();
          let t = new Date().getDate();
          // 8.64e7 为一天， 一定要减去这个月已经过去的天数，不然 当前月选中了 但不回显数据，
          // 因为当前月已经过去的时间，是被禁用了的。
          return (
            time.getTime() < Date.now() - 8.64e7 * t ||
            time.getTime() > date.setFullYear(year + 1)
          );
        }
        // onPick: ({ minDate, maxDate }) => {
        // }
      }