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)随着分辨率不同而自适应

设置高度时，在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值时修改为数值型