iview 組件的使用走過的坑

1.圖標不顯示

修改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

添加 代碼：publicPath: '../../',

// generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置這一部分，根據目錄結構自由調整
        fallback: 'vue-style-loader',
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

2.修改樣式（自己寫的樣式必須爲全局格式，不能添加 scoped）

3.使用的組件如何觸發事件

事件觸發：@on-click.stop="clickFun()"

4. [Vue warn]: Do not use built-in or reserved HTML elements as component id: Switch

翻譯：[Vue warn]：不要將內置或保留的HTML元素用作組件ID:開關

import Vue from 'vue';
import { Switch } from 'iview';
Vue.component('Switch',Switch);  // 修改前，Switch已存在VUE裏面，關鍵字。修改爲其它名字

Vue.component('Switch2',Switch);  // 修改後，不在報錯

5.iview Table 實現高度(height)隨着分辨率不同而自適應

<Table :height="tableHeight" :columns="columns6" :data="data5"></Table>

設置高度時，在height前面添加冒號":",tableHeight 爲自定義屬性

獲取可用高度：let clientHeight = document.body.clientHeight;

獲取其他內容高度：let checkTips = $(".check_tips")[0].clientHeight;

this.tableHeight = clientHeight - checkTips (其它內容的高度);

6.Select 下拉框 使用 v-model 雙向綁定，剛打開頁面時沒有自動顯示默認綁定的值

原因：從緩存localStorage 獲取的的id值爲字符類型，而Select 下拉的Option 裏面的:value 綁定的值爲數值型。

解決辦法：let id = parseInt(this.storage.getItem("id"));  獲取id值時修改爲數值型