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是一樣的。