自定义封装element-ui-table组件

为什么对element进行二次封装？

1. element-ui组件的部分样式不满足当前项目需求

2. element-ui组件出现问题的时候，我们用中间件支持，不至于整个项目崩塌。

二次封装的弊端：

1. 因为我们对element-ui进行了二次封装，当element-ui组件升级的时候，所以我们封装的组件不能直接使用element-ui的新方法，就需要有人不断的对组件进行维护，有一定的开发成本。

封装步骤：

1. 在 components 文件夹下创建一个 element-table 文件夹，在里边分别创建 Table.vue 和 index.js 文件

Table.vue :
	<template>
    	      <div>
        		<el-table :data="showData" stripe="true">
            		         <slot></slot>
        		</el-table>
    	      </div>
	</template>
	<script>
	export default {
    	        name:"ElementTable",
    	        data(){
        	             return{
            		showData:[]
        	             }
    	        },
    	       props:{
        	            data:{
            		type:Array,
            		default:function(){
                	      return []
            		}
        	           }
    	        },
    	      mounted(){
        	           this.showData = this.data
    	       }
	}

 index.js:
	import ElementTable from './Table.vue'
	export default (Vue) =>{  //挂载到vue实例上
    	        Vue.component(ElementTable.name,ElementTable);
	}

2. 在全局 main.js 中引入使用或者局部使用

import ElementTable from './components/element-table'
	Vue.use(ElementTable)

3. 在组件中使用自定义UI插件

<template>
	      <div>
	          <element-table :data="tableData" >  <!-- data中定义tableData,将这个数组传递到子组件Table.vue -->
        		<el-table-column label="时间" prop="date"></el-table-column>
        		<el-table-column label="名称" prop="name"></el-table-column>
        		<el-table-column label="地址" prop="address"></el-table-column>
      	          </element-table>
	      </div>
	</template>
	  data() {
    	       return {
      	            tableData: [
		{
          		      date: "2016-05-02",
          		      name: "王小虎",
          		      address: "上海市普陀区金沙江路 1518 弄"
        		},
        		{
          		      date: "2016-05-04",
          		      name: "王小虎",
          		      address: "上海市普陀区金沙江路 1517 弄"
        		},
        		{
          		      date: "2016-05-01",
          		      name: "王小虎",
          		      address: "上海市普陀区金沙江路 1519 弄"
        		},
        		{
          		      date: "2016-05-03",
          		      name: "王小虎",
          		      address: "上海市普陀区金沙江路 1516 弄"
        		}
	            ]
	        }
	   }