一份 ElementUI 問題清單

「本文已參與好文召集令活動，點擊查看後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

記錄本身平常開發中遇到的問題及其解決辦法。

一、form 下面只有一個 input 時回車鍵刷新頁面

緣由是觸發了表單默認的提交行爲，給el-form 加上@submit.native.prevent就好了。

<el-form inline @submit.native.prevent>
  <el-form-item label="訂單號">
    <el-input v-model="query.orderNo" :placeholder="輸入訂單號查詢" clearable @keyup.enter.native="enterInput" />
  </el-form-item>
</el-form>
複製代碼

二、表格固定列最後一行顯示不全

這種狀況有時在寬度恰好處於臨界值狀態時會出現。由於固定列是獨立於表格body動態計算高度的，出現了固定列高度小於表格高度因此形成最後一行被遮擋。

// 設置全局
.el-table__fixed-right {
  height: 100% !important;
}
複製代碼

三、氣泡確認框文檔裏的confirm事件不生效

ElementUI 2.14.0 版本事件名稱改成 confirm 和 cancel，若是你的版本低於 2.14.0，記得使用onConfirm、onCancel。

// 將confirm改成onConfirm
<el-popover @onConfirm="">
</el-popover>
複製代碼

四、輸入框用正則限制但綁定值未更新

看到項目裏有下面這麼一段代碼：

<el-input v-model="form.retailMinOrder" placeholder="請輸入" onkeyup="value=value.replace(/[^\d.]/g,'')" />
複製代碼

這樣作雖然輸入框的顯示是正確的，但綁定的值是沒有更新的，將 onkeyup 改成 oninput 便可。

• PS：經評論區的兄弟指正，輸入中文後 v-model 會失效，下面的方式更好一點：

<el-input v-model="form.retailMinOrder" placeholder="請輸入" @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')" />
複製代碼

五、去除type="number"輸入框聚焦時的上下箭頭

/* 設置全局 */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
} 
.clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
.clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
.clear-number-input.el-input {
  -moz-appearance: textfield;
} 
.clear-number-input.el-input input[type="number"] {
  -moz-appearance: textfield;
}
複製代碼

<el-input type="number" class="clear-number-input" />
複製代碼

六、只校驗表單其中一個字段

在一些用戶註冊場景中，提交整個表單前有時候咱們會作一些單獨字段的校驗，例如發送手機驗證碼，發送時咱們只須要校驗手機號碼這個字段，能夠這樣作：

this.$refs['form'].validateField('mobile', valid => {
  if (valid) {
    // 發送驗證碼
  }
})
複製代碼

若是須要多個參數，將參數改成數組形式便可。

七、彈窗從新打開時表單上次的校驗信息未清除

有人會在open時在$nextTick裏重置表單，而我選擇在關閉時進行重置。

<el-dialog @close="onClose">
  <el-form ref="form"> </el-form>
</el-dialog>

// 彈窗關閉時重置表單
onClose() {
  this.$refs['form'].resetFields()
}
複製代碼

八、表頭與內容錯位

網上也有其餘一些辦法，但我記得對我沒什麼做用，後來我是用下面這個辦法：

// 全局設置
.el-table--scrollable-y .el-table__body-wrapper {
 overflow-y: overlay !important;
}
複製代碼

九、表單多級數據結構校驗問題

<el-form :model="form">
  <el-form-item label="部門" prop="dept"></el-form-item>
  <el-form-item label="姓名" prop="user.name"></el-form-item>
</el-form>
複製代碼

rules: {
  'user.name': [{ required: true, message: '姓名不能爲空', trigger: 'blur' }]
}
複製代碼

十、表格跨分頁多選

看到項目裏有小夥伴手動添加代碼去處理這個問題，其實根據文檔，只需加上row-key和reserve-selection便可。

<el-table row-key="id">
  <el-table-column type="selection" reserve-selection></el-table-column>
</el-table>
複製代碼

十一、根據條件高亮行並去除默認hover顏色

<el-table :row-class-name="tableRowClassName">
</el-table>

tableRowClassName({ row }) {
  return row.status === 2 ? 'highlight' : ''
}

// 設置全局
.el-table .highlight {
  background-color: #b6e8fe;
  &:hover > td {
    background-color: initial !important;
  }
  td {
    background-color: initial !important;
  }
}
複製代碼

十二、表單不想顯示label但又想顯示必填星號怎麼辦

// label給個空格便可
<el-form>
  <el-table>
    <el-table-column label="名稱">
      <template>
        <el-form-item label=" ">
           <el-input placeholder="名稱不能爲空" />
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>
複製代碼

1三、table 內嵌 input 調用 focus 方法無效

<el-table>
  <el-table-column label="名稱">
    <template>
      <el-input ref="inputRef" />
    </template>
  </el-table-column>
</el-table>

// 無效
this.$refs['inputRef'].focus()
this.$refs['inputRef'][0].focus()
this.$refs['inputRef'].$el.children[0].focus()

// 有效
<el-input id="inputRef" />
document.getElementById('inputRef').focus()
複製代碼

1四、表格內容超出省略

看到有小夥伴在代碼裏本身手動去添加CSS來實現，害，又是一個不看文檔的反面例子，其實只要加個show-overflow-tooltip就能夠了，還自帶tooltip效果，不香嗎？

<el-table-column label="客戶名稱" prop="customerName" show-overflow-tooltip>
</el-table-column>
複製代碼

1五、el-tree 展開/收起全部節點

<el-tree ref="tree"></el-tree>

expandTree(expand = true) {
  const nodes = this.$refs['tree'].store._getAllNodes()
  nodes.forEach(node => {
    node.expanded = expand
  })
}
複製代碼

1六、el-popover 位置偏移問題

事情原由：el-popover 裏的內容是動態獲取的，因此剛打開時位置正確，此時內容爲空，等到獲取數據渲染後 el-popover 內容盒子大小發生變化從而形成位置偏移。

解決辦法：經過源碼知道 el-popover 裏有個 updatePopper 方法用於更新位置（文檔裏沒有），因此咱們只需在獲取數據後從新 updatePopper 就能夠了。

<el-popover ref="popover" placement="left" trigger="click">
</el-popover>
複製代碼

// 獲取數據後
this.$nextTick(() => {
  this.$refs['popover'].updatePopper()
})
複製代碼

1七、el-dialog 的 destroy-on-close 屬性設置無效

destroy-on-close 設置爲 true 後發現彈窗關閉後 DOM 元素仍在，沒有被銷燬。

解決辦法：在 el-dialog 上添加 v-if。

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>
複製代碼

1八、el-cascader 選擇後須要點擊空白處才能關閉

級聯選擇器在設置爲可選任意一級時，選定某個選項時須要手動點擊空白處才能關閉。

解決辦法：可在 change 事件觸發時將其關閉。

<el-cascader ref="cascader" @change="onChange" />
複製代碼

onChange() {
  this.$refs['cascader'].dropDownVisible = false
}
複製代碼

1九、使用圖片查看器

el-image 組件是自帶圖片預覽功能的，傳入 preview-src-list 便可。但有時候咱們不用 image 組件但又想預覽大圖怎麼辦？例如點擊一個按鈕時彈出一個圖片查看器？

答案是使用 el-image-viewer，文檔裏並無這個組件，但經過查看源碼知道，該組件正是 el-image 裏預覽圖片所用的。

<template>
  <div> <el-button @click="open">打開圖片預覽</el-button> <el-image-viewer v-if="show" :on-close="onClose" :url-list="urls" :initial-index="initialIndex" /> </div>
</template>

<script> import ElImageViewer from 'element-ui/packages/image/src/image-viewer' export default { components: { ElImageViewer }, data() { return { show: false, urls: ['https://img0.baidu.com/it/u=391928341,1475664833&fm=26&fmt=auto&gp=0.jpg'], initialIndex: 0 } }, methods: { open() { this.show = true }, onClose() { this.show = false } } } </script>
複製代碼

未完待續，哪天遇到了什麼再更新。。。