element ui 使用记录

1、input 输入框

只能输入数字且输入框输入后值为数值
1

<el-input 
   v-model.number="points" 
   oninput="value=value.replace(/[^\d]/g,'')" 
   class='query-ctrl' />
   // .number 修饰符 将输入后的值格式化为number类型
   // oninput 正则校验，若不是数字格式则不允许输入
1
2
3
4
5
6

2、form表单

表单中input enter后刷新了当前页
需求：仅请求数据，不刷新当前页面

但只对input框进行keyup.enter 限制 不生效
需要多form增加@submit.native.prevent

<el-form @submit.native.prevent>
  <el-input  @blur="handleGetFeeDto" @keyup.enter.native="handleGetFeeDto"></el-input>
</el-form>

  //@submit.native.prevent
  //submit 顾名思义就是提交
  //.native 表示对一个组件绑定系统原始事件
  //.prevent 表示提交以后不刷新页面
1
2
3
4
5
6
7
8

3、自定义input / 下拉数据 (指令使用)

blur 也可使用 MouseDown 进行点击获取 MouseDown事件先与blur执行

需要在下拉数据处展示不可选择原因及disabled
select 失焦后会将输入框清空，不够友好
input el-autocomplete 不可以设置禁选

所以 使用 input / div 进行自定义

需自定义设置下拉数据的显隐
blur事件先于pop click事件 所以需增加指令 Clickoutside
1
2

import Clickoutside from 'element-ui/src/utils/clickoutside'
directives: { Clickoutside },
1
2

<el-form-item prop="customerName" class="is-required">
   <span class="title" slot="label">客户名称：span>
   <div class="customer-box" v-clickoutside="blur">
     <el-input class="customer-name" v-model.trim="customerName"  placeholder="请输入客户名称，进行动态查询" @input="queryCompany">el-input>
     <div class='customer-pop el-select-dropdown el-popper' v-show='showPop' v-loading='loading'>
       <ul v-if="customerList.length > 0" class="el-scrollbar__view el-select-dropdown__list">
         <li v-for="(item,index) in customerList" :key='index' class='el-select-dropdown__item' @click="onSelectCompany(item)">
           <label class="name" :class="{ isDisabled: item.industryStatus || item.customerOrderStatus}">{{ item.customerName }} <span style="color: #DE7474; padding: 0 15px;">{{item.industryStatus ? '行业不匹配' : ''}}span>  <span style="color: #DE7474; padding: 0 5px;">{{item.customerOrderStatus ? '检查合同' : ''}}span>label>
          li>
        ul>
        <p v-else style="text-align: center">未匹配到数据p>
      div>
    div>
el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对于指令要给一个回调函数

blur() {
	this.showPop = false
}
1
2
3