ElementUI常遇到的一些問題

2022 年 1 月 29 日
筆記
Element UI, element-ui, VUE

一、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事件不生效

原因：版本：element-ui: “2.13.2”， vue: “2.6.10”

// 將confirm改為onConfirm
@onConfirm="onDeleteOrder(row.id)"

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

看下面這麼一段程式碼：

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

　這樣做雖然輸入框的顯示是正確的，但綁定的值是沒有更新的，將 onkeyup 改為 oninput 即可。由於輸入中文後 v-model 會失效,然後進一步改進

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

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

<el-input type="number" class="clear-number-input" />

/* 設置全局 */
.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;
}

六、只校驗表單其中一個欄位

在一些場景中，提交整個表單時我們會做一些單獨欄位的校驗，例如發送手機驗證碼，發送時我們只需要校驗手機號碼這個欄位，可以這樣做：

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" :rules="rules">

  <el-form-item label="公司" prop="company"></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>

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

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

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

// 有效
<el-input id="refInput" />
document.getElementById('refInput').focus()

十四、表格內容超出省略。

每行加上 show-overflow-tooltip即可超出範圍的氣泡。

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

十五、el-tree 展開/收起所有節點

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

expandTree(expand = true) {
  const nodes = this.$refs['treeList'].store._getAllNodes()
  nodes.forEach(node => {
    node.expanded = expand
  })
}

待更新。。。。。。。。。。。。。。。。。。。。。。。

Tags: Element UI element-ui VUE