Element使用小技巧

• el-date-picker使用时的时间格式
  在使用el-date-picker进行时间选择的时候想要生成时间戳可以增加属性value-format=“timestamp” 就可以，添加change时间后选择后的时间会以时间戳的形式输出。
  如果想要选择时间后获取的是当日结束的时间戳，需要增加属性:default-time="[‘00:00:00’, ‘23:59:59’]"，例如以下代码：

<el-date-picker
  v-model="formData.followDefault"
   :default-time="['00:00:00', '23:59:59']"
   type="daterange"
   value-format="timestamp"
 ></el-date-picker>

• Element的form表单中的重制方法需要配上prop属性
  通过调用this.$refs[formName].resetFields() 方法可以对form表单的数据进行重置，formName值就是el-form中对的ref的值，另外调用 resetFields 方法需要 form-item 组件中配置 prop 属性，例如：

<el-form-item
   label="在职状态"
   placeholder="请选择保险师"
   prop="statusDefault"
   style="margin-left:40px;">
   <el-select
     v-model="formData.statusDefault"
      filterable
      clearable
      @change="insurChange"
      style="width:170px"
    >
      <el-option
        v-for="(item, index) in formData.statusData"
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
</el-form-item>

formData是一个js对象，主要是用来存放form表单中用到的所有数据，el-form-item中绑定了属性statusDefault，这样在调用重置方法时就可以将该属性重置为初始值，否则resetFields不会生效

• el-table中出现的数据错位问题，需要给对应的行添加:key值
  出现这种问题的场景是：当你需要在不同的tab下展示不同的el-table-column，这时需要给每个el-table-column添加key值，如果不绑定key值就会出现对应列的值错位问题，如下：

<el-table-column
  :key="Math.random()"
  label="列名"
  prop="itemGap"
  min-width="120"
  v-if="tabIndex == 3"
></el-table-column>

这样就会在每个列绑定一个key值，Math.random产生一个随机数key绑定在列中，这样就会解决了对应列的值错位的问题，但是这样的还会存在一个隐藏的问题，当我把代码发到测试环境然后切换tab时我的表头在tab切换时会出现抖动的问题，抖动不会产生功能上的问题，但是交互上看起来不太好，产生这个问题的原因就是绑定key值产生的随机数，因为每次切换tab都会重新生成随机数，所以这里我将这个key值绑定成固定的值，如下：

<el-table-column
  key="25"
  label="加保件数缺口"
  prop="itemGap"
  min-width="120"
  v-if="tabIndex == 3"
></el-table-column>

这里的key值直接改成自然数就可以解决表头出现抖动的问题。

• el-input输入框只限制输入整数
  之前我都是通过输入框的内容来给出提示，正则匹配如果不是输入了整数然后给出对应的提示，其实后可以通过这方法来限制输入框只能输入整数。

<el-input
  style="width:86px;"
  v-model="formData.itemEnd"
  oninput="value=value.replace(/[\D]/g,'')"
></el-input>

通过监听oninput事件，将输入的非数字直接转换成空字符串，也就是说输入非数字相当于没输入，也可以写成οninput=“value=value.replace(/[ ^ \d]/g,’’)”，正则中的^代表非，和\d组合起来用作用和\D是一样的。