Element-ui踩坑小结

Element-ui 实际开发中遇到的坑

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

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

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

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

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();
                }
            },
        }
    }

4.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>

小结：

1.vue+element-ui项目中绑定事件，如果原生方法不起作用，可以优先考虑使用加.native限制符的方法使用，一般都能解决
2.项目进行中，有新坑会继续添加。