Iview使用总结

1 安装：

npm install iview --save（推荐使用 npm 来安装，更好地和 webpack 配合使用
）

2. 按需引

借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

然后这样按需引入组件，就可以减小体积了：

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

3. 引入Iview

在 webpack 入口页面 main.js 中进行配置（一般全局安装的东西，在main.js进行配置）

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

组件使用遇到的问题

• 合并单元格
  4.0以后才有表体的合并单元格
• 固定表头且左右滑动
  
  iview给表格绑定高后，数据少会有空白
  
  但是绑定max-height后，左右滑动的左边这一块，会被遮盖划不动
  解决方法：给表体数据赋值时；计算一下有多少项数据；乘以每行高度40；加上表头高度；与表格最大高做对比；如果高度低于表格最大高，加上autoHeight的类名
  在组件上的父亲div上加上

:class="[hFlag?'autoHeight]':''"
csszhong 

css中写autoHeight{height：auto;}