elementUI在vue中使用的问题

安装及使用：
1、npm i element-ui -S
2、在main.js中

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

一、layout布局
1、布局分栏间隔:gutter----添加在row上
Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。
2、分栏偏移offset，左侧的偏移–添加在col上
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
3、对齐方式：通过 flex 布局来对分栏进行灵活的对齐。添加在row上
将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
二、Container 布局容器
1、：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

三、表格
1、表格错位
/deep/ .el-table th.gutter{
display: table-cell!important;
}
2、表头重新定义render-header:列标题 Label 区域渲染使用的 Function

  <el-table-column
        class-name="br"
        v-for="column in differColumn"
        :key="column.label" v-bind="column"
        :show-overflow-tooltip="column.overflow === false ? false : true"
        resizable
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          {{scope.row[column.prop]}}
        </template>
        >
      </el-table-column>

方法：

 renderHeader(h, { column, $index },index){
		            // console.log(h)
		            // console.log(column, $index)
		            let txt = column.label.length ? column.label.length : 0;
		            let long = 14 * txt + 60;
		            column.minWidth=long
		            return h('div', {
		              attrs: {
		                class: 'cell'  //ele原来样式
		              },
		              domProps: {
		                innerHTML: `<span style="width:`+long+`px;">`+column.label +`</span>`
		              }
		            })
		    
		          },

四、form表单的验证，可以不填写，一旦填写必须保留2位小数，且只能输入数字

 <el-form :model="company" :rules="infoRules" ref="infoForm" label-width="13em">
 	     <el-col :span="12">
                  <el-form-item label="煤气（吨标准煤）" prop="gas" style="max-width:550px;">
                    <el-input v-model="company.gas" :minlength="1" :maxlength="16"   clearable onkeyup="if(isNaN(value)&&'-'!=value)execCommand('undo')" onafterpaste="if(isNaN(value)&&'-'!=value)execCommand('undo')">
                    </el-input>
                  </el-form-item>
                </el-col>
 </el-form>



export default{
data(){
 var transformNumber2End = (rule, value, callback) => {
        var reg = /^\d+.?\d*$/;
        if (reg.test(value)) {
          this.company[rule.field] = String(Number(value).toFixed(2));
          callback();
        } else {
          callback(new Error('请输入数字'));
        }
      }
return {
company:{
gas:''
},
  infoRules: {
  gas: [{required: false, message: "请填写煤气"}, {validator: transformNumber2End, trigger: "blur"}],
  }

}

}