ElementUI两个小坑

ElementUI是基于Vue.js的桌面端组件库。以下是针对ElementUI的两个小坑的简要解释和解决方法：

1. 表单验证不生效

解释：在使用ElementUI的表单验证时，如果发现验证不生效，可能是因为没有正确地绑定model和rules属性，或者是没有在表单提交时调用this.$refs.formName.validate()方法。

解决方法：确保你的表单使用了el-form组件，并且通过ref属性为表单指定了一个引用名称。同时确保el-form-item组件中的prop属性与你在el-form组件中定义的model对象的属性相对应。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('验证通过');
          } else {
            alert('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

2. 日期选择器无法正确显示

解释：ElementUI的日期选择器组件在某些情况下可能会遇到显示不正确的问题。

解决方法：确保你已经正确地引入了ElementUI的CSS样式文件，并且检查是否有其他CSS样式冲突。如果是样式问题，你可能需要重写相关的CSS规则。

// 在main.js或相应的入口文件中
import 'element-ui/lib/theme-chalk/index.css';

如果问题依然存在，可以尝试重新安装ElementUI，或者检查是否有ElementUI版本兼容性问题。

npm uninstall element-ui
npm install element-ui@latest