【element ui】問題集錦

這是我參與8月更文挑戰的第8天，活動詳情查看：8月更文挑戰

1、菜單路由跳轉

要實現路由跳轉，先要在el-menu標籤上添加router屬性。

而後只要在每一個el-menu-item標籤內的index屬性設置一下url便可實現點擊el-menu-item實現路由跳轉。

固然也能夠在每一個el-menu-item標籤內的router屬性設置一下url便可實現點擊跳轉切優先級較index高。

2、是否只保持一個子菜單的展開配置時報錯

• 配置：<el-menu unique-opened = true>
• 報錯：Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String.
• 改成：<el-menu :unique-opened = true> 或 <el-menu :unique-opened = "true">

3、修改element-ui樣式

由於官方文檔並不詳細，像官方文檔沒有說el-aside的寬度怎麼設置。

而後我發現，給el-aside的class裏設置寬度不行，貌似會被元素樣式覆蓋掉，非得設置style="width:210px"。

問題來了：我點擊某個按鈕，經過jequery或者全局變量控制修改el-aside的寬度。同時當我頁面上有定時器不斷刷新存在時，修改的寬度會恢復成style="width:210px"。

目前解決的辦法只有一個，修改element-ui元素樣式，再經過jq修改元素el-aside的寬度時，不管定時器setTimeout怎麼刷新也不會影響當前樣式修改。

此處注意：

• 一、修改樣式時經過全局變量控制，會明顯出現卡頓現象，最後仍是選擇經過jequery的.css或者.animate方法。
• 二、setTimeout比setInterval對內存影響更友好。
• 三、正經說說怎麼經過正規渠道修改element-ui樣式：官網API文檔沒有那就只能看源碼。

好比修改el-aside的寬度，找到文件\node_modules\element-ui\packages\aside\index啥也沒有，引入了Aside from './src/main';

繼續查看文件./src/main

<aside class="el-aside" :style="{ width }">
  <slot></slot>
</aside>
複製代碼

以上能夠看出el-aside能夠設置修改寬度經過

props: {
  width: {
    type: String,
    default: '300px'
  }
}
複製代碼

屬性width默認300px，由此能夠按照源碼樣式修改，注意當前值的類型是String，因此設置以下： <el-aside :width="'210px'"> 210px必定要用單引號''括起來轉換成String類型。

4、border-image致使el-table表頭的邊框時有時無

• 現象：el-table__header左右邊框有時候不顯示
• 區別：表頭的高寬不同
• 改：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 30 30;
• 爲：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 5;

就能夠了……

緣由：

border-image: linear-gradient()後面的四個參數分別表示top right bottom left

有一些高寬限制確定不能超過外層div的高寬，然而具體的限制，參考以下博文，我試了下仍是不對，暫時找不到其餘資料。

www.cnblogs.com/zhangdongya…

包括這四個參數設置 30  30px  1/30px的差異爲何中間那個不能夠，另外兩個分別顯示的什麼仍是不清楚。哎。

5、element標籤el-select失效

element標籤使用時候千萬注意string和number類型的對應一致，否則一直不生效，好比：

<el-select v-model="validTime" clearable placeholder="請選擇">
    <el-option v-for="item in validTimeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
複製代碼

validTimeData = [{"label":"20分鐘","value":"20"},{"label":"5分鐘","value":"5"}] 

當validTime = "20"時，顯示正常20分鐘，

當validTime = 20時，顯示異常，由於找不到20對應的label，因此顯示20。

6、element ui的表單rules驗證問題

<el-form :model="deviceBox" :rules="rules" ref="deviceBox">
<el-form-item label="設備名稱" prop="name">
    <el-input v-model="deviceBox.name"></el-input>
</el-form-item>
rules: {
    name: [
        {required: true, message: '請輸入設備名稱', trigger: 'blur'},
        {min: 3, max: 25, message: '長度在 3 到 25 個字符'}
    ]
}
複製代碼

• 一、的model、rules、ref屬性必不可少
• 二、的prop屬性值與v-model的屬性值必須保持一致
• 三、rules規則，詳見github.com/yiminghe/as…

7、火狐下，el-tab展現的echarts提示Dom has no width or height

思考過程：

• 一、一層層給容器添加高寬100%，沒用，同時發現.el-tabs__content無法加寬度100%；
• 二、發現.el-tabs加上border: 1px solid green;後就正常了，很怪；
• 三、與此同時發現echarts內層的div確實獲取不到高度，但能正常獲取寬度；
• 四、給echarts層的div的class中，賦高度和寬度100%不行，600px也不行，只有在style上賦值600px能夠，或者在class中賦值600px !important能夠。

而後意識到100% !important是能夠的，不過多是真的100%只有這麼高，可是一層層100%的高度爲何到此就沒了高度呢。

剛剛不是有個.el-tabs__content無法加寬度嗎，查看.el-tabs__content層：position: relative！

暈改成absolute就好了，可是插件原來的樣式亂掉了得本身慢慢調整。

• fixed
• 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
• 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
• static
• 沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
• inherit
• 規定應該從父元素繼承 position 屬性的值。
• relative
• 生成相對定位的元素，相對於其正常位置進行定位。
• 所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
• absolute
• 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
• 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

8、element樹中的default-expanded-keys一旦加載沒法修改的問題

一般使用el-tree以下：

<el-tree ref="tree" :default-expanded-keys="[defaultId]"></el-tree>
但項目裏，將其嵌入組件中這麼用時：
<el-dialog :visible.sync="deptVisible" append-to-body>
    <my-tree>
        <el-tree ref="tree" :default-expanded-keys="[defaultId]"></el-tree>
    </my-tree>
</el-dialog>
複製代碼

有個問題：

在彈出框中包含el-tree，初始化el-tree時，給默認展開賦值defaultId，彈出框關閉從新彈出即使defaultId改變了，el-tree的默認展開仍是沒變。

嘗試修改：

defaultId改變時父組件調用子組件的設置選中值和當前高亮值的方法，以下

this.$refs.tree.setCheckedKeys([defaultId])
this.$refs.tree.setCurrentKey(defaultId)
複製代碼

發現當彈出框關閉後打開，defaultId變化後，確實選中和高亮變了，可是以前的展開項仍然展開！！

百度發現：

segmentfault.com/q/101000001…

這篇文章說到【tree和tree-store都沒有提供收起節點的方法】。。。

因而思考：

遍歷是不可能的，可是我可讓el-tree更新或者從新加載啊！

瞭解到VUE的生命週期：

updated是當data裏的數據有變化時觸發，而不是父組件傳遞過來的props，props是一次性的，因此updated無望。

須要注意的是，查看源碼能夠發現element組件的dialog方法用的v-show，只是隱藏了對話框部分，因此即使關閉了對話框，裏面的組件並無銷燬。

那麼我能夠在dialog隱藏的時候，經過v-if使得tree銷燬啊啊！！！

以下設置便可：

<el-dialog :visible.sync="deptVisible" append-to-body>
    <my-tree v-if="deptVisible"></my-tree>
</el-dialog>
複製代碼

9、el-table表格寬度拖動功能

官方文檔有以下幾個屬性（Table-column Attributes）：

resizable：對應列是否能夠經過拖動改變寬度（須要在el-table上設置border屬性爲真）

show-overflow-tooltip：當內容過長被隱藏時顯示tooltip

注意：

• 一、Table-column屬性也就是說是設置在標籤上的！！！
• 二、如需使用resizable的拖動改變寬度功能，必須在el-table上設置屬性border爲真，不是樣式設置border，是屬性！！！

例如：

<el-table element-loading-text="拼命加載中..." ref="table" :data="tableData" highlight-current-row :border="true">
    <el-table-column v-for="column in columns" :key="column.id" :property="column.prop" :label="column.name" :resizable="true" show-overflow-tooltip>
    </el-table-column>
</el-table>
複製代碼

10、清除浮動很重要

使用el-form佈局時有個問題，若是想分兩欄佈局，左邊一列右邊一列，最下面還有合起來一個，像這樣：

<el-form label-width="80px" size="mini">
    <div class="info-left">
      <el-form-item label="設備ID:"><el-input v-model="devInfo.info.id"></el-input></el-form-item>
    </div>
    <div class="info-right">
      <el-form-item label="設備類型:"><el-input v-model="devInfo.info.dtype"></el-input></el-form-item>
    </div>
    <el-form-item label="備註:">
      <el-input type="textarea" v-model="devInfo.info.remarks"></el-input>
    </el-form-item>
</el-form>

.el-form .info-left {
  width: 49%;
  float: left;
}
.el-form .info-right {
  width: 49%;
  float: right;
}
複製代碼

而後發現，除了最下面的備註能夠正常輸入操做，上面兩欄無法正常輸入使用。 爲何呢？不知道啊，好奇怪哦。 忽然意識到上面左右兩欄沒有清除浮動啊，清除了一下結果果真好了啊。

<el-form label-width="80px" size="mini">
    <div class="info-left">
      <el-form-item label="設備ID:"><el-input v-model="devInfo.info.id"></el-input></el-form-item>
    </div>
    <div class="info-right">
      <el-form-item label="設備類型:"><el-input v-model="devInfo.info.dtype"></el-input></el-form-item>
    </div>
    <div style="clear:both"></div>
    <el-form-item label="備註 :">
      <el-input type="textarea" v-model="devInfo.info.remarks"></el-input>
    </el-form-item>
</el-form>
複製代碼

結論：清除浮動真的很重要！！！

另外：

在使用el-tabs等組件時，火狐下也會出現高度顯示異常，但凡DIV高寬異常時，按以下步驟排查：

• 一、肯定用百分數異常，查看其外層div是否設置高寬。
• 二、查看是否存在浮動沒有清除。
• 三、檢查position的設置是否合理。