使用element-ui遇到的坑_使用element ui过程中遇到的问题

1. input中验证只能输入数字

在v-model后边加上.number只能现在不能以非数字开头，用type="number"可以解决

在后台返数据的时候也许返回的是字符串类型的数字，所以在赋值的时候需要判断一下数据类型

2.form表单验证

场景：在打开编辑弹窗时利用$nextTick()对输入框进行赋值，然后保存时快速多次点击保存按钮，

在下次打开编辑窗口时，input中的内容正确但是验证报红。

解决办法：在打开的时候利用clearValidate对文本框中的验证进行重置(这次重置也是$nextTick()中，或者按照代码顺序卸载$nextTick()后面，不是里边，总之不能卸载$nextTick()上边;不能利用resetField()否则内容将被清空)

注：form表单中的model和ref尽量要写成一样的，否则可能会出错

3.Tree 上边设置 key

在 el-tree 标签上设置动态设置一个 key 会导致 filter 功能失效，为了避免 vue 的“就地复用原则”所以需要在每次关闭弹窗或者其他情况需要使用 setCheckedKeys([]) 来手动清空

 4.element走马灯--取消自动播放

用官网上提供的autoplay不起作用，将interval设置为0方可

5.使用el-select 不能继承父元素的宽度 

原因：el-select 本身是  inline-block

解决办法：给el-select 元素加行内 控制其宽度。

6.Upload文件上传

解决方法：给<el-upload></el-upload>标签加上before-upload属性

7.el-form 标签绑定data中的form时候，请使用:model=“form” 而不是v-model=“form”，不然表单校验会不起作用

原因： el-form的具有自己封装的model属性，表示表单数据对象

8.局部覆盖element-ui的默认样式

解决办法：在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以，记住给class加上能限制范围的父层选择器，不然设置的样式会全局生效

9.1. DropDown组件使用时，子选项无法绑定事件的处理

问题描述：正常在vue+element-ui项目中，点击事件可以通过@click绑定成功（@click=‘fun’）；但是在elementUI --DropDown组件的子组件上绑定click事件时，用@click=‘fun’无法绑定成功
解决方案：使用DropDown组件绑定点击事件时，需要加 .native 才能绑定成功，即 @click.native=‘fun’ ，即可成功，如下图

9.2.table表格组件展示不同状态显示不同颜色等情况的处理

解决方案：不适用prop属性直接展示，而是要在el-table-column中定义新组件template

9.3.时间选择器选择范围限制

3.1 单个输入框的

	组件代码:
<el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions0">
</el-date-picker>

3.1.1 需求：设置选择今天及今天之后的日期

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

3.1.2 需求：设置选择今天及今天以前的日期

data (){
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                }
            },
        }
    }

3.1.3 需求：设置选择今天之后的日期（不能选择当天时间） ----测试无用

data (){
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                }
            },
        }
    }

3.1.4 需求：设置选择今天之前的日期（不能选择当天）----测试无用

data (){
        return {
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
        }
    }

3.1.5 需求：设置到今天为止90天的日期

data (){
        return {
            pickerOptions0: {
                disabledDate(time) {
                    let curDate = (new Date()).getTime();
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > Date.now() || time.getTime() < threeMonths;;
                }
            },
        }
    }

3.2 两个输入框

组件代码

 <el-date-picker
        v-model="value1"
        type="date"
        placeholder="开始日期"
        :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
    v-model="value2"
    type="date"
    placeholder="结束日期"
    :picker-options="pickerOptions1">
</el-date-picker>

3.2.1 限制结束日期不能大于开始日期 （element UI 中有关联日期选择器，此需求可用在项目中不使用关联日期选择期时使用）

data(){
        return {
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2 != "") {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            },
        }
    }

10.Vue键盘回车事件

如果是原生的input，使用@keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，原事件就不起作用了，代码如下：

<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>