vue+element踩坑记录(持续更新中)

一. el-input(输入框)

 

(1). 禁止中文输入

<el-input 
  v-model="userCode" 
  oninput="if(this.value)this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'');">
</el-input>

(2). 禁止首尾空格

v-model.trim

(3). 禁止全部空格

onkeyup="this.value=this.value.replace(/\s+/g,'')"

二. el-select(下拉框)

(1). 使用时需要增加v-model，否则会报错需要必填一个value

(2). 如果绑定v-model时，需要使用绑定一个对象：

<el-select value-key="id">
  <el-option v-for="item in arrList" 
    :key="item.id" 
    :value="item" 
    :label="item.label">
  </el-option>
</el-select>

(3). 如果使用多选时，则将v-model的值修改成数组格式，回显则将字符串split(',')转成数组即可

三. el-form(表单)

(1). 表单校验

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };
    }
  }
</script>

(2). 表单重置

this.$refs[表单的ref].resetFields();

四. el-rdopdown(下拉菜单)

子组件上绑定click事件时，用@click=‘fun’无法绑定成功 解决方案：使用DropDown组件绑定点击事件时，需要加 .native 才能绑定成功，即 @click.native=‘fun’ ，即可成功

五. el-date(日期框)

显示类型使用type

展示类型或者下发参数使用format或者value-format

(1). 设置选择今天及今天之后的日期

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

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

(2). 设置选择今天及今天以前的日期

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

(3). 有日期范围区间时，设置结束日期不能大于开始日期

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

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

五. el-dialog(弹出框)

(1). 使用弹出框频繁嵌套时，页面置灰

增加append-to-body属性，将当前的弹出框增加到当前的body中

六. el-scrollbar(隐藏滚动条)

官网上并没有暴露出来这个组件，通过el-scrollbar包裹想要滚动的组件，然后在css样式文件里面，添加样式就可以了

首先，el-scrollbar组件的父级一定要有高度，其次el-scrollbar__thumb这个样式是设置滚动条的，不添加就没有滚动条了

<el-scrollbar style="height:100%">
	<div class="filter-tree"></div>
</el-scrollbar>

七：el-switch(开关)

字符串格式参数

<el-switch
  active-value='1'
  inactive-value='0'
  v-model="form.status"
  active-color="#13ce66"
  inactive-color="#ff4949"
></el-switch>

数字格式参数

<el-switch
  :active-value='1'
  :inactive-value='0'
  v-model="form.status"
  active-color="#13ce66"
  inactive-color="#ff4949"
></el-switch>

八：el-upload(上传文件)

自定义上传触发多次change事件解决方案(多选+自定义上传模式)

vue部分：

<el-upload
 :on-change="handleUpload"
 :on-remove="handleRemove"
 :auto-upload="false"
 :show-file-list="false"
 drag
 action="#"
 ref="upload"
 multiple
 style="display:none;"
 >
  <div class="el-upload__text">拖拽文件或点击上传</div>
</el-upload>

ts/js部分：

  // 附件上传
  private handleUpload(file, fileList) {
    let length = fileList.length;
    this.maxFileLength = Math.max(length, this.maxFileLength)
    setTimeout(() => {
      if (this.maxFileLength !== length) {
        return
      }
      fileList.forEach(item => {
        this.fileList.push(item.raw)
      })
    }, 0)
  }